Для того, чтобы понять чем отличается метод setTimeout от setInterval давайте на примерах разберем, как работают эти методы.
Метод setTimeout служит для того, чтобы вы смогли выполнить какой-нибудь Javascript сценарий с определенным интервалом.
Пример setTimeout:
Предположим, что вам нужно вывести модальное окно или какой-нибудь текст не сразу после загрузки страницы, а после того, как пользователь провел на вашей странице 10 секунд.
Создайте html файл с содержимым:
В данном примере, мы создали структуру документа html, создали div с id settimeout и подключили библиотеку JQuery.
Затем мы создали анонимный метод setTimeout и задали время выполнения через 10 секунд. Обратите внимание, что интервал задается в миллисекундах.
Внутри метода мы говорим, что хотим в div с id settimeout вставить html с текстом "Я появился через 10 секунд после загрузки страницы".
Стоит заметить, что setTimeout выполняется только один раз.
В отличии от setTimeout, метод setInterval выполняется до тех пор, пока не будет вызван метод clearInterval.
Для демонстрации метода setInterval, усложним немного пример.
Наш пример будет состоять из двух файлом ajax.php в котором мы будем хранить массив и возвращать его в формате json.
В файле index.html мы будем ajax'сом выводить новости из файла ajax.php с интервалом две секунды.
Файл ajax.php
В этом файле для примера мы будем хранить данные новостей. Первой строкой мы указываем кодировку utf-8 чтобы можно было корректно отображать русский язык. Далее мы создаем многомерный массив. И строкой json_encode мы преобразуем массив php в формат json для работы с этими данными в javascript.
Теперь дополните созданный файл из прошлого примера index.html следующим кодом:
Методом библиотеки Jquery $.ajax мы делаем фоновую загрузку данных из файла ajax.php. Далее мы создаем функцию setInterval где итеративно добавляем к переменной count единицу. Методом setInterval мы заменили цикл each, чтобы продемонстрировать setInterval.
Методом Jquery append добавляем к div c id setinterval данные. Когда новости заканчиваются, мы очищаем метод setInterval clearInterval, для того, чтобы он больше не выполнялся.
В результате вы увидите, что новости выводятся не все сразу, а с интервалом две секунды.
Методы setInterval и setTimeout используются очень часто в работе веб-программиста.
Если у вас остались вопросы и непонятен принцип работы этих двух полезных методов javascript, посмотрите видеоурок статье.
Скачать примеры вы можете по этой ссылке.
Подписывайтесь на наш канал Youtube, вступайте в группу VK. Также вы можете подписаться на нашу почтовую рассылку, чтобы быть в курсе о новых и полезных материалах для веб-разработчика.
XAMPP - как установить и настроить на Mac (Mojave, Sierra)
Как самостоятельно изучить веб-программирование
Что такое реферальный спам в Google Analytics
Постраничная ленивая загрузка (lazy load) постов
Как стать профессиональным веб-разработчиком
Реализация Lazy Load на Jquery
Три полезных CSS свойства для работы с изображениями
Sublime Text 3 - удобный редактор кода для веб-разработчиков
Установка и настройка веб-сервера для сайта в Ubuntu
Полезные приложения для веб-разработчиков в Google Chrome
GIT команды: Быстрый старт для новичков
Что такое конструктор в объектно-ориентированном программировании
Что такое объектно-ориентированное программирование
Как отправить форму без перезагрузки страницы (AJAX)
Как быстро создать сайт и привлечь поисковый трафик
Bitbucket: Крутой облачный GIT репозиторий
Javascript: Классы в Javascript
Что такое веб-хостинг и как выбрать хостинг для сайта
SQL запросы: Основы администрирования MySQL
Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.
