Как вернуть setTimeout?

Question

[Михаил Р.]

Приветствую!

Имеется element с css анимацией, по окончанию анимации запустить таймер. Если навели курсор на element, то сбросить таймер. Если увели курсор с element - вернуть таймер (вот тут и возникла проблема).

const timeout = setTimeout(() => console.log("timeout!"), 1000);
const fn = () => timeout;

element.addEventListener("animationend", fn);
element.addEventListener("mouseover", () => {
  element.removeEventListener("animationend", fn);
  clearTimeout(timeout);
});
element.addEventListener("mouseout", fn);

Снять таймер получилось, а вот вернуть его обратно - нет :(
Подскажите, как решить проблему, и как бы вы написали код для решения подобной задачи?

Comments

[Владимир]

Разберитесь в своем коде
Какой тип будет у timeout, что должна делать функция fn в вашем коде?

Answer 1

[dollar]

let is_paused = false;
const timeout = setTimeout(() => {
  if (is_paused) return;
  console.log("timeout!");
}, 1000);

Тогда снимать и возвращать таймер можно просто:

is_paused = true; //снять
is_paused = false; //вернуть

А вот это вообще не имеет смысла:
const fn = () => timeout;
Потому что timeout - число (номер таймера). Так что fn() всегда будет возвращать некую числовую константу, которую можно получить и так, обращаясь непосредственно к timeout, которая не меняется. То есть timeout - не ссылка на объект таймера, а просто число.

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

Comments

[Михаил Р.]

Получается, clearTimeout при таком подходе не нужен?

[dollar]

Mike Ro, да.

[Михаил Р.]

dollar, спасибо! )

[alexalexes]

Только имейте ввиду, что сами таймеры продолжают тикать и занимать вычислительные ресурсы. Если приложение в ходе работы кардинально меняет своем состояние, предполагающее полное уничтожение таймеров, то пренебрегать на этот случай использование clearTimeout не стоит.

[dollar]

alexalexes, таймер, который раз в секунду провеляет булеву переменную и затем просто пропускает эту секунду, практически не использует ресурсы. И частое создание нового таймера может быть даже дороже, чем раз в секунду проверять булеву переменную. Но в любом случае, это экономия на спичках. Конечно, никто не запрещает экономить спички, дело вкуса. В конечном итоге удачность решения зависит от конкретных условий задачи (что за сайт, как часто юзер водит мышкой и т.д.).

Answer 2

[Дмитрий Беляев]

const createPausableTimer = (cb, timeout, ...args) => {
  let lastStart = Date.now();
  let paused = false;
  let timerID = setTimeout(cb, timeout, ...args);
  let remainingTime = timeout;
  return {
    pause() {
      if(paused) { return; }
      clearTimeout(timerID);
      paused = true;
      remainingTime -= Date.now() - lastStart;
    },
    resume() {
      if(!paused || remainingTime < 0) { return; }
      lastStart = Date.now();
      paused = false;
      timerID = setTimeout(cb, remainingTime, ...args);
    }
  };
};

element.addEventListener("animationend", () => {
  const timer = createPausableTimer(() => {
    console.log("timeout!");
    element.removeEventListener("mouseover", timer.resume);
    element.removeEventListener("mouseout", timer.pause);
  }, 1000);
  element.addEventListener("mouseover", timer.resume);
  element.addEventListener("mouseout", timer.pause);
});