Методи setTimeout та setInterval у Javascript
Автор: Сергій Ніконов
Дуже часте питання на співбесіді кандидата на посаду веб-розробника - чим відрізняється setTimeout від setInterval. Важливо не тільки знати, чим відрізняється setTimeout від setInterval, але й розуміти як можна використовувати обидва методи Javascript у задачах веб-програміста. У цій статті на прикладах ми розберемо, що це за методи і чим вони відрізняються один від одного.
Відеоурок до статті
Для того, щоб зрозуміти, чим відрізняється метод setTimeout від setInterval, давайте на прикладах розберемо, як працюють ці методи.
Метод setTimeout
Метод setTimeout служить для того, щоб ви змогли виконати Javascript сценарій з певним інтервалом.
Приклад setTimeout:
Припустимо, що вам потрібно вивести модальне вікно або якийсь текст не відразу після завантаження сторінки, а після того, як користувач провів на вашій сторінці 10 секунд.
Створіть html файл із вмістом:
У цьому прикладі ми створили структуру документа html, створили div з id settimeout і підключили бібліотеку JQuery.
Потім ми створили анонімний метод setTimeout та задали час виконання через 10 секунд. Зверніть увагу, що інтервал задається у мілісекундах.
Усередині методу ми говоримо, що хочемо в div з id settimeout вставити html з текстом "Я з'явився через 10 секунд після завантаження сторінки".
Варто зауважити, що setTimeout виконується лише один раз.
Метод setInterval
На відміну від setTimeout метод setInterval виконується до тих пір, поки не буде викликаний методclearInterval.
Для демонстрації методу setInterval ускладнимо трохи приклад.
Наш приклад складатиметься з двох файлом ajax.php у якому ми зберігатимемо масив і повертатимемо його у форматі json.
У файлі index.html ми будемо виводити новини з файлу ajax.php з інтервалом дві секунди.
У цьому файлі для прикладу ми зберігатимемо дані новин. Першим рядком ми вказуємо кодування utf-8, щоб можна було коректно відображати українську мову. Далі ми створюємо багатовимірний масив. І рядком json_encode ми перетворимо масив php у формат json для роботи з цими даними на JavaScript.
Тепер доповніть створений файл із минулого прикладу index.html наступним кодом:
Методом бібліотеки Jquery $.ajax ми робимо фонове завантаження даних із файлу ajax.php. Далі ми створюємо функцію setInterval, де ітеративно додаємо до змінної count одиницю. Методом setInterval ми замінили цикл кожного, щоб продемонструвати setInterval.
Методом Jquery append додаємо до div c id setinterval дані. Коли новини закінчуються, ми очищаємо метод setInterval clearInterval, щоб він більше не виконувався.
В результаті ви побачите, що новини виводяться не всі одразу, а з інтервалом дві секунди.
Методи setInterval та setTimeout використовуються дуже часто у роботі веб-програміста.
Завантажити приклади ви можете за цим посиланням.