При разработке фронтэнда, особенно слайдеров на js, часто требуется использовать циклы, потому что, например, слайды должны автоматически переключаться сами через определённый интервал времени. Для организации циклов на javascript используется функция setInterval. Но на таких слайдерах часто нужно организовать и ручное переключение слайдов, таким образом, в момент ручного включения определённого слайда, цикл должен прерваться. Программист в этом случае может столкнуться с такой задачей, как прерывание цикла setInterval.
Пример использования управляемого цикла в javascript с помощью функций setInterval и clearInterval
Функция которая будет выполняться повторяться в цикле:
|
1 2 3 |
function action(){ ... } |
Устанавливаем паузу между иттерациями цикла в милисекундах
|
1 |
var speed = 2000; |
Запускаем цикл (функция setInterval) и назначаем ему идентификатор «intervalID»
|
1 |
var intervalID = setInterval('action()', speed); |
Что-бы прервать выполнение скрипта используем функцию clearInterval
|
1 |
clearInterval(intervalID); |
Что-бы возобновить прерванный цикл
|
1 |
intervalID = setInterval('action()', speed); |
Важное дополнение для тех кто использует данную функцию в обёртке jQuery
Если цикл организуется в обёртке jQuery, например если используется интегрированная библиотека jQuery в Joomla вида:
|
1 2 3 |
jQuery(function($){ ... }); |
То нужно делать так:
|
1 |
intervalID = setInterval(action, speed); |
Ещё дополнение
Иногда получается что функция setInterval проигрывает только первую итерацию (вызывается только раз)
|
1 2 3 |
var action = function(){ ... } |
|
1 |
intervalID = setInterval(action, speed); |