JavaScript: пауза setTimeout ();

Question

Если у меня запущен активный тайм-аут, установленный через var t = setTimeout("dosomething()", 5000),

Есть ли способ приостановить и возобновить его?Есть ли способ получить время, оставшееся на текущем тайм-ауте?
или мне нужно в переменной, когда тайм-аут установлен, сохранить текущее время, затем мы сделаем паузу, чтобы получить разницу между сейчас и потом?

Answer 1

Вы можете обернуть window.setTimeout вот так, что я думаю, похоже на то, что вы предлагали в вопросе:

function Timer(callback, delay) {
    var timerId, start, remaining = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= Date.now() - start;
    };

    this.resume = function() {
        start = Date.now();
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
    };

    this.resume();
}

var timer = new Timer(function() {
    alert("Done!");
}, 1000);

timer.pause();
// Do some stuff...
timer.resume();

Answer 2

Нечто подобное должно сработать.

function Timer(fn, countdown) {
    var ident, complete = false;

    function _time_diff(date1, date2) {
        return date2 ? date2 - date1 : new Date().getTime() - date1;
    }

    function cancel() {
        clearTimeout(ident);
    }

    function pause() {
        clearTimeout(ident);
        total_time_run = _time_diff(start_time);
        complete = total_time_run >= countdown;
    }

    function resume() {
        ident = complete ? -1 : setTimeout(fn, countdown - total_time_run);
    }

    var start_time = new Date().getTime();
    ident = setTimeout(fn, countdown);

    return { cancel: cancel, pause: pause, resume: resume };
}

Answer 3

Нет. Вам нужно отменить его (clearTimeout), измерить время с момента его запуска и перезапустить с новым временем.

Answer 4

Немного измененная версия Тима Даунса ответ . Однако, так как Тим откатил мое редактирование, я должен ответить на это сам. Мое решение позволяет использовать дополнительный arguments в качестве третьего (3, 4, 5 ...) параметра и очистить таймер:

function Timer(callback, delay) {
    var args = arguments,
        self = this,
        timer, start;

    this.clear = function () {
        clearTimeout(timer);
    };

    this.pause = function () {
        this.clear();
        delay -= new Date() - start;
    };

    this.resume = function () {
        start = new Date();
        timer = setTimeout(function () {
            callback.apply(self, Array.prototype.slice.call(args, 2, args.length));
        }, delay);
    };

    this.resume();
}

Как отметил Тим, дополнительные параметры недоступны в IE lt 9, однако я немного поработал, чтобы он работал и в oldIE.

Использование: new Timer(Function, Number, arg1, arg2, arg3...)

function callback(foo, bar) {
    console.log(foo); // "foo"
    console.log(bar); // "bar"
}

var timer = new Timer(callback, 1000, "foo", "bar");

timer.pause();
document.onclick = timer.resume;

Answer 5

Время ожидания было достаточно простым, чтобы найти решение, но Интервал был немного хитрее.

Я придумал следующие два класса, чтобы решить эту проблему:

function PauseableTimeout(func, delay){
    this.func = func;

    var _now = new Date().getTime();
    this.triggerTime = _now + delay;

    this.t = window.setTimeout(this.func,delay);

    this.paused_timeLeft = 0;

    this.getTimeLeft = function(){
        var now = new Date();

        return this.triggerTime - now;
    }

    this.pause = function(){
        this.paused_timeLeft = this.getTimeLeft();

        window.clearTimeout(this.t);
        this.t = null;
    }

    this.resume = function(){
        if (this.t == null){
            this.t = window.setTimeout(this.func, this.paused_timeLeft);
        }
    }

    this.clearTimeout = function(){ window.clearTimeout(this.t);}
}

function PauseableInterval(func, delay){
    this.func = func;
    this.delay = delay;

    this.triggerSetAt = new Date().getTime();
    this.triggerTime = this.triggerSetAt + this.delay;

    this.i = window.setInterval(this.func, this.delay);

    this.t_restart = null;

    this.paused_timeLeft = 0;

    this.getTimeLeft = function(){
        var now = new Date();
        return this.delay - ((now - this.triggerSetAt) % this.delay);
    }

    this.pause = function(){
        this.paused_timeLeft = this.getTimeLeft();
        window.clearInterval(this.i);
        this.i = null;
    }

    this.restart = function(sender){
        sender.i = window.setInterval(sender.func, sender.delay);
    }

    this.resume = function(){
        if (this.i == null){
            this.i = window.setTimeout(this.restart, this.paused_timeLeft, this);
        }
    }

    this.clearInterval = function(){ window.clearInterval(this.i);}
}

Это может быть реализовано так:

var pt_hey = new PauseableTimeout(function(){
    alert("hello");
}, 2000);

window.setTimeout(function(){
    pt_hey.pause();
}, 1000);

window.setTimeout("pt_hey.start()", 2000);

В этом примере будет установлен пауза Тайм-аут (pt_hey), который должен предупредить "эй" через две секунды. Еще один тайм-аут приостанавливает pt_hey через одну секунду. Третий таймаут возобновляется через две секунды. pt_hey работает в течение одной секунды, делает паузу в течение одной секунды, затем возобновляет работу. pt_hey срабатывает через три секунды.

Теперь для более сложных интервалов

var pi_hey = new PauseableInterval(function(){
    console.log("hello world");
}, 2000);

window.setTimeout("pi_hey.pause()", 5000);

window.setTimeout("pi_hey.resume()", 6000);

В этом примере задается паузный интервал (pi_hey) для записи «hello world» в консоли каждые две секунды. Тайм-аут приостанавливает pi_hey через пять секунд. Другой тайм-аут возобновляется через шесть секунд. Таким образом, pi_hey сработает дважды, запустится на одну секунду, остановится на одну секунду, запустится на одну секунду, а затем продолжит срабатывание каждые 2 секунды.

ДРУГИЕ ФУНКЦИИ

• clearTimeout () и clearInterval ()

  pt_hey.clearTimeout(); и pi_hey.clearInterval(); служат простым способом очистки тайм-аутов и интервалов.

• getTimeLeft ()

  pt_hey.getTimeLeft(); и pi_hey.getTimeLeft(); вернут количество миллисекунд до запланированного следующего запуска.

Answer 6

«Пауза» и «возобновление» на самом деле не имеют особого смысла в контексте setTimeout, что является разовым .Вы имеете в виду setInterval?Если это так, нет, вы не можете приостановить его, вы можете только отменить его (clearInterval), а затем снова запланировать его.Подробности всего этого в разделе Таймеры спецификации.

// Setting
var t = setInterval(doSomething, 1000);

// Pausing (which is really stopping)
clearInterval(t);
t = 0;

// Resuming (which is really just setting again)
t = setInterval(doSomething, 1000);

Answer 7

/ возрождать

Версия ES6 с использованием синтаксического сахара класса y ?

(слегка изменено: добавлено начало ())

class Timer {
  constructor(callback, delay) {
    this.callback = callback
    this.remainingTime = delay
    this.startTime
    this.timerId
  }

  pause() {
    clearTimeout(this.timerId)
    this.remainingTime -= new Date() - this.startTime
  }

  resume() {
    this.startTime = new Date()
    clearTimeout(this.timerId)
    this.timerId = setTimeout(this.callback, this.remainingTime)
  }

  start() {
    this.timerId = setTimeout(this.callback, this.remainingTime)
  }
}

// supporting code
const pauseButton = document.getElementById('timer-pause')
const resumeButton = document.getElementById('timer-resume')
const startButton = document.getElementById('timer-start')

const timer = new Timer(() => {
  console.log('called');
  document.getElementById('change-me').classList.add('wow')
}, 3000)

pauseButton.addEventListener('click', timer.pause.bind(timer))
resumeButton.addEventListener('click', timer.resume.bind(timer))
startButton.addEventListener('click', timer.start.bind(timer))

<!doctype html>
<html>
<head>
  <title>Traditional HTML Document. ZZz...</title>
  <style type="text/css">
    .wow { color: blue; font-family: Tahoma, sans-serif; font-size: 1em; }
  </style>
</head>
<body>
  <h1>DOM &amp; JavaScript</h1>

  <div id="change-me">I'm going to repaint my life, wait and see.</div>

  <button id="timer-start">Start!</button>
  <button id="timer-pause">Pause!</button>
  <button id="timer-resume">Resume!</button>
</body>
</html>

Answer 8

Мне нужно было рассчитать прошедшее и оставшееся время, чтобы показать индикатор выполнения. Нелегко было использовать принятый ответ. 'setInterval' лучше, чем 'setTimeout' для этой задачи. Итак, я создал этот класс Timer, который вы можете использовать в любом проекте.

https://jsfiddle.net/ashraffayad/t0mmv853/

'use strict';


    //Constructor
    var Timer = function(cb, delay) {
      this.cb = cb;
      this.delay = delay;
      this.elapsed = 0;
      this.remaining = this.delay - self.elapsed;
    };

    console.log(Timer);

    Timer.prototype = function() {
      var _start = function(x, y) {
          var self = this;
          if (self.elapsed < self.delay) {
            clearInterval(self.interval);
            self.interval = setInterval(function() {
              self.elapsed += 50;
              self.remaining = self.delay - self.elapsed;
              console.log('elapsed: ' + self.elapsed, 
                          'remaining: ' + self.remaining, 
                          'delay: ' + self.delay);
              if (self.elapsed >= self.delay) {
                clearInterval(self.interval);
                self.cb();
              }
            }, 50);
          }
        },
        _pause = function() {
          var self = this;
          clearInterval(self.interval);
        },
        _restart = function() {
          var self = this;
          self.elapsed = 0;
          console.log(self);
          clearInterval(self.interval);
          self.start();
        };

      //public member definitions
      return {
        start: _start,
        pause: _pause,
        restart: _restart
      };
    }();


    // - - - - - - - - how to use this class

    var restartBtn = document.getElementById('restart');
    var pauseBtn = document.getElementById('pause');
    var startBtn = document.getElementById('start');

    var timer = new Timer(function() {
      console.log('Done!');
    }, 2000);

    restartBtn.addEventListener('click', function(e) {
      timer.restart();
    });
    pauseBtn.addEventListener('click', function(e) {
      timer.pause();
    });
    startBtn.addEventListener('click', function(e) {
      timer.start();
    });

Answer 9

Мне нужно было иметь возможность приостановить setTimeout () для функции, похожей на слайд-шоу.

Вот моя собственная реализация приостановленного таймера. Он объединяет комментарии к ответу Тима Дауна, такие как лучшая пауза (комментарий ядра) и форма прототипирования (комментарий Умура Гедика.)

function Timer( callback, delay ) {

    /** Get access to this object by value **/
    var self = this;



    /********************* PROPERTIES *********************/
    this.delay = delay;
    this.callback = callback;
    this.starttime;// = ;
    this.timerID = null;


    /********************* METHODS *********************/

    /**
     * Pause
     */
    this.pause = function() {
        /** If the timer has already been paused, return **/
        if ( self.timerID == null ) {
            console.log( 'Timer has been paused already.' );
            return;
        }

        /** Pause the timer **/
        window.clearTimeout( self.timerID );
        self.timerID = null;    // this is how we keep track of the timer having beem cleared

        /** Calculate the new delay for when we'll resume **/
        self.delay = self.starttime + self.delay - new Date().getTime();
        console.log( 'Paused the timer. Time left:', self.delay );
    }


    /**
     * Resume
     */
    this.resume = function() {
        self.starttime = new Date().getTime();
        self.timerID = window.setTimeout( self.callback, self.delay );
        console.log( 'Resuming the timer. Time left:', self.delay );
    }


    /********************* CONSTRUCTOR METHOD *********************/

    /**
     * Private constructor
     * Not a language construct.
     * Mind var to keep the function private and () to execute it right away.
     */
    var __construct = function() {
        self.starttime = new Date().getTime();
        self.timerID = window.setTimeout( self.callback, self.delay )
    }();    /* END __construct */

}   /* END Timer */

Пример:

var timer = new Timer( function(){ console.log( 'hey! this is a timer!' ); }, 10000 );
timer.pause();

Чтобы проверить код, используйте timer.resume() и timer.pause() несколько раз и проверьте, сколько осталось времени. (Убедитесь, что ваша консоль открыта.)

Использовать этот объект вместо setTimeout () так же просто, как заменить timerID = setTimeout( mycallback, 1000) на timer = new Timer( mycallback, 1000 ). Тогда вам доступны timer.pause() и timer.resume().

Answer 10

Если вы все равно используете jquery, проверьте плагин $. DoTimeout .Эта вещь является огромным улучшением по сравнению с setTimeout, в том числе позволяет отслеживать тайм-ауты с помощью одного идентификатора строки, который вы задаете и который не меняется каждый раз, когда вы его устанавливаете, а также реализовывать простую отмену, циклы опроса и отладку, а такжеБольше.Один из моих самых популярных плагинов jquery.

К сожалению, он не поддерживает паузу / возобновление из коробки.Для этого вам нужно будет обернуть или расширить $ .doTimeout, предположительно аналогично принятому ответу.