JavaScript setInterval, повторне виконання функції із затримкою

За аналогією з setTimeout , який виконується лише один раз, JavaScript можна запустити повторне виконання функції через фіксовані проміжки часу. Для цього існує функція setInterval.

Якщо ти тут уперше, то спочатку раджу розібратися, як працює setTimeout.

Запуск JS таймера setInterval

У JS setInterval ті ж параметри, що і setTimeout .

• callback - функція, яку потрібно викликати
• delay - затримка у мілісекундах

Першим параметром передаємо функцію callback, другим - затримку delay. Після виконання, setInterval запустить таймер, який буде асинхронно запускати callback кожні delay мілісекунд.

console.log('START!'); setInterval(() =>
console.log('bingo'), 2000);

У консолі з'явиться повідомлення START! і після нього, кожні дві секунди з'являтиметься з нового рядка слово bingo .

START! bingo bingo bingo .

У функції всередині setInterval можна використовувати зовнішні змінні.

const
delay
=
2; let
i
=
1; console.log('START!'); setInterval(() =>
< console.log(повідомлення
$i>, з'явилося на екрані через
$delay
*
i++>
секунд`), delay
*
1000);

У консолі з'являться такі повідомлення:

START! повідомлення 1, з'явилося на екрані через 2 секунд повідомлення 2, з'явилося на екрані через 4 секунд повідомлення 3, з'явилося на екрані через 6 секунд повідомлення 4, з'явилося на екрані через 8 секунд

Зупинка JS таймера setInterval

Щоб зупинити setInterval JavaScript, потрібно використовувати функцію clearInterval . Щоб зрозуміти як очистити інтервал у JS, розберемося докладніше з тим, як він працює:

setInterval повертає об'єкт, який зберігає всі дані про періодичне виконання функції:

Timeout
< _idleTimeout:
2000, _idlePrev: [TimersList], _idleNext: [TimersList], _idleStart:
141, _onTimeout: [Function],  _timerArgs:
undefined, _repeat:
2000, _destroyed:
false, [Symbol(refed)]:
true, [Symbol(asyncId)]:
5, [Symbol(triggerId)]:
1 >

const
delay
=
2; const
limit
=
2; let
i
=
1; console.log('START!'); const
limitedInterval
=
setInterval(() =>
< console.log(повідомлення
$i>, з'явилося на екрані через
$delay
*
i++>
секунд`) if (i
>
limit) < clearInterval(limitedInterval); > >, delay
*
1000);

Анонімна стрілкова функція всередині setInterval виконається лише двічі. Потім умова i > limit стане істинною та інтервал очиститься викликом clearInterval(limitedInterval) .

START! повідомлення 1 з'явилося на екрані через 2 секунд повідомлення 2 з'явилося на екрані через 4 секунд

setInterval()

setInterval() у JavaScript — це метод глобального об'єкта, що дозволяє виконувати код або викликати функцію регулярно із заданим інтервалом. Інтервальний час визначається в мілісекундах, а зупинити виконання коду можна за допомогою clearInterval() .

Синтаксис

setInterval(() => < console.log('Пройшло 2 секунди') >, 2000)

Перше повідомлення буде виведено в console тільки через 2 секунди після початку роботи методу, а не негайно.

Функція в setInterval() може бути стрілочною, анонімною, іменованою, методом об'єкта або конструктором, а також рядком (що не рекомендується).

setInterval(function() < console.log('Пройшло 2 секунди') >, 2000)

 setInterval(printMessage, 2000) function printMessage()

Записуючи ім'я функції в setInterval(), пам'ятайте, що дужки в даному випадку пропускаються.

Затримка

Інтервал часу в setInterval() задається у мілісекундах. Якщо завдання виконувати код кожну секунду, пишемо 1000, якщо кожну хвилину - тоді 60000. Можна також встановити 0 або навіть пропустити цей аргумент. У цьому випадку метод намагатиметься виконати код якнайчастіше, але на практиці інтервал залежить від ряду факторів, таких як реалізація JavaScript та завантаження системи. Якщо грубо, орієнтуватися можна на 4-10 мілісекунд.

Максимальне значення, яке можна задати в setInterval() становить 2147483647 мілісекунд, це близько 24.85 днів.

Крім іншого, працюючи з setInterval(), варто пам'ятати, що виклик функції може відбуватися не через чітко заданий час - виконання може затримуватися через різні фактори, такі як завантаження процесора та інші завдання в черзі.

 setInterval(function() < console.log('Пройшло 2 секунди') >, 2000) for (let i = 0; i

У цьому прикладі висновок console повідомлення Пройшло 2 секунди ми побачимо тільки після того, як відпрацює цикл для . ми відразу побачимо роботу setInterval() .

Якщо вкладка не активна тривалий час, сучасні браузери уповільнюють або навіть припиняють виконання JavaScript, у цьому випадку робота setInterval() може бути сповільнена або навіть призупинена.

Можлива ситуація, при якій функція setInterval() відпрацьовує довше, ніж проміжок між її викликами. У цьому випадку виклики функції будуть накопичуватися, і код буде виконуватися без затримок. починати тільки після того, як потрібна нам функція виконається.

 setTimeout(print, 2000) function print()

Додаткові параметри

У функцію, що викликається через setInterval() , можна передати аргументи безпосередньо через метод.

let startMessage = 'Пройшло' let endMessage = '2 секунди' setInterval(printMessage, 2000, startMessage, endMessage) function printMessage(message1, message2) < console.log(`$$`) >

Використовуючи анонімну функцію.

setInterval(function() < printMessage(startMessage, endMessage) >, 2000)

setInterval(function(message1, message2) < console.log(`$$`) >, 2000, startMessage, endMessage)

setInterval(() => printMessage(startMessage, endMessage), 2000)

clearInterval

Щоб скасувати інтервальний виклик функції, встановлений за допомогою setInterval() , використовують функцію clearInterval() .

let timerId = setInterval(() => < console.log('Пройшло 2 секунди') >, 2000) setTimeout(() => < clearInterval(timerId) console.log('Спрацював clearInterval') >, 6000) console. log(timerId) // 1

Для початку змінну записуємо унікальний ідентифікатор, який повертає функція setInterval() . Цю змінну потім використовуємо в clearInterval() . Щоб встановити тимчасову затримку перед зупинкою інтервального виконання коду, додаємо setTimeout() . Для наочності можна виводити значення унікального ідентифікатора. У нашому прикладі це буде 1

Варто зауважити, що ідентифікатор, що повертається setInterval() , не завжди дорівнюватиме 1. Це залежить від того, скільки інших таймерів та інтервалів було створено до цього.

цей і setInterval

Розглянемо, як контекст цеповодиться при роботі з setInterval() в різних ситуаціях.

Іменована функція

function message() < console.log(this) >setInterval(message, 1000) // Window

Це в іменованій функції, що викликається в setInterval() , посилається на глобальний об'єкт window в браузерах і на global в Node.js.

const obj = <message: 'Пройшла секунда', printMessage: function message() < console.log(`Повідомлення: $`) > > setInterval(obj.printMessage, 1000) // Повідомлення: undefined console.log(window.message ) // undefined

У методі об'єкта, викликаного через setInterval , це також буде посилатися на глобальний об'єкт window . Тому в нашому випадку ми отримаємо undefined, те ж саме, що і при window.message.

Стрілка функція

const obj = < message: 'Пройшла секунда', printMessage: function message() < setInterval(() =>< console.log(`Повідомлення: $`) >, 1000) > > obj.printMessage() // Повідомлення: Минула секунда

Стрілецькі функції успадковують контекст із навколишнього середовища, в результаті ми отримуємо бажаний результат.

Можна встановити контекст виконання явно.

const obj = < message: 'Пройшла секунда', printMessage: function message() < console.log(`Повідомлення: $`) > > setInterval(obj.printMessage.bind(obj), 1000) // Повідомлення: Пройшла секунда

Анонімна функція

Також отримати бажаний контекст можна, обернувши виклик в анонімну функцію.

const obj = < message: 'Пройшла секунда', printMessage: function message() < console.log(`Повідомлення: $`) > > setInterval(function() < obj.printMessage() >, 1000) // Повідомлення: секунда