Методи setTimeout и setInterval в Javascript
Автор: Сергей Никонов
Много често срещан въпрос в интервю за уеб програмист е каква е разликата между setTimeout и setInterval. Важно е не само да знаете как setTimeout се различава от setInterval, но и да разберете как и двата метода на Javascript могат да се използват в задачите на уеб програмист. В тази статия, използвайки примери, ще анализираме какви са тези методи и как се различават един от друг.
Видео урок за статията
За да разберем как методът setTimeout се различава от setInterval, нека да разгледаме примери за това как работят тези методи.
метод setTimeout
Методът setTimeout се използва, за да ви позволи да изпълните някакъв Javascript скрипт на определен интервал.
Пример setTimeout:
Да предположим, че трябва да покажете модален прозорец или някакъв текст не веднага след зареждането на страницата, а след като потребителят е прекарал 10 секунди на вашата страница.
Създайте html файл със съдържание:
В този пример създадохме структура на html документ, създадохме div с id settimeout и включихме библиотеката jQuery.
След това създадохме анонимен метод setTimeout и зададохме времето за изпълнение на 10 секунди. Имайте предвид, че интервалът е в милисекунди.
Вътре в метода казваме, че искаме да вмъкнем html в div с id settimeout с текст „Появих се 10 секунди след зареждането на страницата“.
Имайте предвид, че setTimeout се изпълнява само веднъж.
метод setInterval
За разлика от setTimeout, методът setInterval се изпълнява, докато не бъде извикан методътclearInterval.
За да демонстрираме метода setInterval, нека усложним малко примера.
Нашият пример ще се състои от два файла ajax.php, в които ще съхраним масив и ще го върнем във формат json.
Във файла index.html ще показваме ajax новини от файла ajax.php с интервал от две секунди.
В този файл, например, ще съхраняваме новинарски данни. На първия ред посочваме кодировката utf-8, за да може българският език да се показва коректно. След това създаваме многоизмерен масив. И с реда json_encode ще преобразуваме php масива в json формат, за да работим с тези данни в javascript.
Сега попълнете файла index.html, създаден от предишния пример, със следния код:
Използвайки метода на библиотеката Jquery $.ajax, ние извършваме фоново зареждане на данни от файла ajax.php. След това създаваме функция setInterval, където итеративно добавяме единица към променливата count. Заменихме цикъла на each с метода setInterval, за да демонстрираме setInterval.
Използвайки метода за добавяне на Jquery, добавяме данни към div с id setinterval. Когато новините свършат, изчистваме метода setInterval clearInterval, така че да не се изпълнява повече.
В резултат на това ще видите, че новините не се показват наведнъж, а с интервал от две секунди.
Методите setInterval и setTimeout се използват много често в работата на уеб програмиста.
Можете да изтеглите примери от тази връзка.