Таймеры в JavaScript

Таймеры в JavaScript

Здравствуйе!  В этом уроке я расскажу о таком понятии как таймеры в JavaScript.  Тут надо заметить, что в JavaScript имеется так называемый  внутренний таймер-планировщик, который и  позволяет задавать вызов  любой функции через определенный период времени. Вот эти-то функции мы с вами и рассмотрим в этом уроке.

таймеры на Javascript

Метод setTimeout

Эта функция позволяет задать  задержку на выполнения любого кода на вход она принимает 2 параметра. Это функция или код на который вам надо установить задержку и собственно время задержки, заданное в миллисекундах. Имеет следующий синтаксис:

var timer = setTimeout(func, delay)

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

func
Функция  для исполнения.
delay
Время задержки в миллисекундах.

Выполнение функции произойдёт спустя определенное время, которое указанное в параметре delay.

Вот пример, этот  код вызовет func() ровно через 2 секунды:

function funct() {
  alert( 'Привет Javascript' );
}
setTimeout(funct, 2000);

Можно также использовать анонимные функции, вот таким образом:

setTimeout(function() { alert('Привет Javascript') }, 2000);

Отмена исполнения  таймера clearTimeout

Следует заметить, что функция setTimeout  может возвращать  так называемый  числовой идентификатор таймера timerId, который можно  впоследствии использовать для отмены действия.

Вот пример:

var timer= setTimeout(...);
clearTimeout(timer);

В этом примере мы поставим таймаут, а затем удаляем (передумали наконец). В результате мы видим, что ничего не происходит.

var timer = setTimeout(function() { alert(1) }, 2000);
alert(timer); // число - так называемый идентификатор таймера
clearTimeout(timer);
alert(timer); // всё ещё число, но оно не обнуляется после отмены

Как видите из alert, в браузере этот идентификатор таймера есть обычное числом.

Метод setInterval

Данный  метод имеет синтаксис,  как и у setTimeout. Но позволяет выполнять код не один раз,  а много раз за заданный интервал времени. Это напоминает как если бы мы вызывали метод setTimeout в цикле ( о циклах Javascript я писал здесь).

var timer = setInterval(funс, delay)

Смысл аргументов в принципе тот же самый. Остановить же исполнение можно вызовом clearInterval(timer).
Данный пример при запуске будет выводить сообщение каждые 2 секунды,до тех пока не пройдёт пять секунд:

// начать повторы с интервалом 2 сек
var timer = setInterval(function() {
  alert( "тик-так" );
}, 2000);
// а через 5 секунд остановить повторы
setTimeout(function() {
  clearInterval(timer);
  alert( 'стоп' );
}, 5000);

Итоги

  • Функции setInterval(func, delay) и setTimeout(func, delay) позволяют вам запускать func регулярно/один раз через delay(задержку)  миллисекунд.
  • Оба метода могут возвращать идентификатор таймера. Его  впоследствии можно использовать  для остановки выполнения  функции вызовом  методов clearInterval/clearTimeout.
Читайте также  Как создать переменную в JavaScript

Задания

Выведите  числа через  каждые 100 мс

Вам надо написать  функцию printNumInterval(), которая  будет последовательно выводит в консоль числа от 1 до 10, с интервалом между числами 200 мс.

Функция должна использовать setInterval.

Вывод чисел каждые 100 мс, через setTimeout

Сделайте то же самое, что в первой задаче, но только с использованием рекурсивного setTimeout вместо setInterval.

Как вы думаете кто быстрее?

Допустим есть 2 бегуна:

var runner1 = new Run();
var runner2 = new Run();

У каждого есть свой метод step(), который делает шаг, увеличивая свойство steps.

Конкретный код метода step() не имеет значения, важно лишь только что шаг делается не мгновенно, а он требует небольшого времени.

Если запустить первого бегуна через setInterval, а второго – через вложенный setTimeout – какой из бегунов  сделает больше шагов за 5 секунд?

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: