Периодически в коде требуется использовать таймеры, которые выполняли бы определенные функции через какое-то время или только один раз. Данную проблему решают функции setInterval и setTimeout в java script.
setInterval - таймер, позволяет периодически выполнять одни и те же действия заданные в функции. Пример:
setInterval(function() {
alert('Приветик');
}, 5000);
Данный пример запустит alert-собщение через 5 сек. и повторит данное действие бесконечное количество раз с интервалом в 5 сек.
С помощью этого таймера можно считать секунды, выполнять анимацию и многое другое. Часто периодических действий для таймер достаточно много. Поэтому запуск действий можно перенести в заранее заданную функцию. Пример:
function show() { alert('Приветик!'); }
setInterval(function() { show(); }, 2000);
setTimeout - это таймер, который выполняется скриптом единожды с временем задержки, которое указано как и в setInterval. Пример:
setTimeout(function() { alert('Привет'); }, 2000);
Сообщение появится через 2 сек. после запуска скрипта, затем таймер больше не будет срабатывать.
Если вам нужно остановить запущенный таймер, то сначала присвойте ему идентификатор, а затем используйте функцию clearTimeout. Пример:
var id = setInterval(function() { alert('Еда');
clearTimeout(id); }, 5000);
alert(id);
Здесь переменная id - идентификатор таймера в виде числа. После принудительного завершения работы, его номер все равно сохранится в id. В этом примере сначала высветится идентификатор таймера, а через 5 сек. слово Еда, после чего сработает функция clearTimeout в которой уже будет прописан id таймера, который надо закрыть. Если бы ее не было, то таймер срабатывал каждые 5 секунд.
Умный (рекурсивный) setTimeout
Позволяет менять время таймера в зависимости от каких-либо условий, событий.
var timers = setTimeout(function ticks() {
alert( "Сработал!" );
timers = setTimeout(ticks, 2000);
}, 5000);
В этом примере мы меняем время срабатывания таймера на 2 сек.