Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Javascript » Settimeout-setinterval

setTimeout

setTimeout и setInterval в JavaScriptВ javascript имеется встроенный таймер setTimeout, с помощью которого мы можем запустить функцию, через определённый промежуток времени. Он имеет очень простой синтаксис:

setTimeout(func / code, delay[, arg1, arg2...])

Таймер имеет следующие параметры:

Рассмотрим небольшой пример:

<!DOCTYPE html>
<html>

<body>
 <script>
 function func() {
alert("Who are you?");
}
function start() {
<mark>setTimeout(func, 2000);</mark>
}
 </script>
 <button onClick = "start()">
Запустить функцию через 2 секунды
</button>
</body>
</html>

Как видите в данном примере, при нажатии на кнопку функция запускается через две секунды. Ничего сложного.

setInterval

Также в JS есть похожий метод setInterval, он имеет абсолютно такой же синтаксис, но в отличие от setTimeout он повторяет запуск функции вновь и вновь. Для того, чтобы отменить повтор можно использовать метод clearInterval().

И как всегда небольшой пример:

// начать повторы с интервалом 1 сек
var timerId = setInterval(function() {
   var date = new Date();
   var seconds = date.getSeconds();
   if (seconds < 10) seconds = "0" + seconds;
   alert( seconds );
}, 1000);

// через 4 сек остановить повторы
setTimeout(function() {
  clearInterval(timerId);
  alert( 'стоп' );
}, 4000);

Как видно из примера, функция повторяется с интервалом одной секунды, показывая текущие секунды в реальном времени. А через четыре секунды происходит остановка функции.


Кстати, на мой взгляд лучше использовать рекурсивный метод setTimeout, чем setInterval:

// начать повторы с интервалом 1 сек
var timerId = setTimeout(function startTime() {
   var date = new Date();
   var seconds = date.getSeconds();
   if (seconds < 10) seconds = "0" + seconds;
   alert( seconds );
   timerId = setTimeout(startTime, 1000);
}, 1000);

// через 4 сек остановить повторы
setTimeout(function() {
  clearInterval(timerId);
  alert( 'стоп' );
}, 4000);

Этот способ является наиболее гибким и адаптированным к различным условиям, так как позволяет нам задать различный интервал времени между повторами, в зависимости от ситуации. Можно также отменить действие setTimeout с помощью clearTimeout. Он имеет следующий синтаксис:

var имяПеременной = setTimeout(...);
clearTimeout(имяПеременной);

Ну с этим методом, предлагаю вам разобраться самостоятельно. Зная синтаксис, я думаю, вы без труда это сможете сделать.



наверх