Как удалить setTimeout, если его надо удалить через некоторое время или может ли данная функция удалить саму себя?

#javascript

Коллеги, есть пример



const button = document.querySelector('button');
let timer;

button.addEventListener('click', function() {
  timer = setTimeout(function() {
    document.querySelector('span').remove();
    console.log(timer);
    clearTimeout(timer);
  }, 1111);

  setTimeout(function() {
    console.log(timer);
  }, 2222);
})


Span




setTimeout-ОВ - будет много, чтобы не загрязнять память, удаляю setTimeout,
потом перепроверяя через другой setTimeout получаю в ответ, что он еще жив.


  Второй setTimeout только для проверки


Где я не  прав?

Если прав, то почему в ответ я получаю 1 во-втором setTimeout?
    

Ответы

Ответ 1

Везде правы.

Он не "жив", а просто значение переменной timer не изменилось после присвоения в
timer = setTimeout(....

К сожалению, функция clearTimeout (и clearInterval) не меняет значение переменной,
которая подается туда в качестве параметра. Я использую следующий шаблон, позволяющий
одним действием останавливать таймер и очищать значение переменной:



const button = document.querySelector('button');
let timer;

button.addEventListener('click', function() {
  timer = setTimeout(function() {
    document.querySelector('span').remove();
    console.log(timer);
    timer = clearTimeout(timer); // !!!
  }, 1111);

  setTimeout(function() {
    console.log(timer);
  }, 2222);
})


Span




Конечно, в данном конкретном случае вызов clearTimeout вообще не нужен, так как внутри
обработчика таймер уже выстрелил и больше вызван не будет, так что здесь достаточно
timer = null;.



Сначала про setTimeout.length. 

Свойство length объекта-функции - это число ожидаемых аргументов -

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length. 

В случае setTimeout, обязательный параметр один - 

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout 

функция или код, это и есть значение setTimeout.length = 1. 



Теперь про то, что timer = 1.

Тем, кто имел дело с Windows API, хорошо знакомо понятие "HANDLE". Это некое указание
на внутренний объект Windows, который возращается многими API функциями, чтобы в дальнейшем
передаваться в другие функции. Для этих "рукояток" объявлены специальные типы, которые
часто сводятся к целому числу. Но это вполне может быть преобразованное к целому значение
указателя или что-то другое. Главное, чтобы код Windows нашел этот внутренний объект,
когда мы сошлемся на него с помощью этого значения.

Что-то очень похожее происходит и с таймерами в Javascipt-е. setTimeout нам что-то
возвращает. Что это на самом деле - нас волновать не должно. Этого чего-то достаточно,
чтобы мы могли остановить таймер, передав это в clearTimeout. Судя по тому, что выводится
в консоль, setTimeout возвращает целое число, похожее на счетчик таймеров, созданных
за время жизни страницы. Но это, опять же, никакого значения не имеет и может измениться.