Задача в следюущем: Есть несколько таймеров, которые создаются динамически через цикл. Таймер может быть один, а может быть 10, 15, 20. Нужно реализовать их остановку.
Есть следующий код:
let actions = {
timer: [],
start: [],
stop: function(counter) {
clearTimeout(actions.timer[counter]);
}
};
for (let i = 0; i < 2; i++) {
actions.start[i] = function timerFunc() {
actions.timer[i] = setTimeout(function() {
console.log('hi');
setTimeout(timerFunc,500);
}, 500);
}
}
Работа довольно простая: в цикле присваиваем actions.start функцию с таймером. Также есть метод, который тормозит нужный нам таймер - actions.stop
Чтобы проверить, как работает код, вводим в консоль:
actions.start[0]()
actions.start[1]()
А потом тормозим оба таймера с помощью:
actions.stop(0)
actions.stop(1)
А дальше происходит беда - их получается тормозить иногда сразу, иногда после нескольких попыток. Причем, чем меньше промежуток срабатывания, тем сложнее его затормозить. При 500мс (см. timerFunc), мне понадобилось 4 попытки (копирую результат из консоли):
actions.start[0]()
actions.start[1]()
undefined
(10)hi
actions.stop(0)
actions.stop(1)
undefined
(4)hi
actions.stop(0)
actions.stop(1)
undefined
(2)hi
actions.stop(0)
actions.stop(1)
undefined
(2)hi
actions.stop(0)
actions.stop(1)
undefined
Вопрос в том, почему так происходит и как остановить таймеры, созданные динамично, с первого раза? Например, если я очень быстро введу в консоль:
actions.stop(0)
actions.stop(1)
То все получается. Если хоть немного промедлю, то таймеры продолжают тикать.