Методы setTimeout и setInterval в Javascript
Очень частый вопрос на собеседовании кандидата на должность веб-разработчик - Чем отличается setTimeout от setInterval. Важно не только знать чем отличается setTimeout от setInterval, но и понимать как можно использовать оба метода Javascript в задачах веб-программиста. В этой статье на примерах мы разберем что это за методы и чем они отличаются друг от друга
Web-hosting rating: 8 out of 10 with 325 ratings

Видеоурок к статье

 

Введение

Для того, чтобы понять чем отличается метод 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'сом выводить новости из файла 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. Также вы можете подписаться на нашу почтовую рассылку, чтобы быть в курсе о новых и полезных материалах для веб-разработчика.





Читайте также


Что такое NodeJS и npm?

XAMPP - как установить и настроить на Mac (Mojave, Sierra)

Как самостоятельно изучить веб-программирование

Взломали Cкайп, что делать?

Что такое реферальный спам в Google Analytics

Постраничная ленивая загрузка (lazy load) постов

Как стать профессиональным веб-разработчиком

Реализация Lazy Load на Jquery

Три полезных CSS свойства для работы с изображениями

Массивы в Javascript

Что такое TypeScript

CSS3 - Эффект вращения

Sublime Text 3 - удобный редактор кода для веб-разработчиков

Установка и настройка веб-сервера для сайта в Ubuntu

Полезные приложения для веб-разработчиков в Google Chrome

Модальное окно на Jquery

GIT команды: Быстрый старт для новичков

Что такое конструктор в объектно-ориентированном программировании

Что такое объектно-ориентированное программирование

Как отправить форму без перезагрузки страницы (AJAX)

Как быстро создать сайт и привлечь поисковый трафик

Bitbucket: Крутой облачный GIT репозиторий

Javascript: Классы в Javascript

Что такое веб-хостинг и как выбрать хостинг для сайта

SQL запросы: Основы администрирования MySQL

Команды Linux: оболочка BASH

Joomla CMS: Преимущества и недостатки

Качественный сайт: семь ключевых свойств



Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.



Комментарии





Евгений ответить
Очень хороший видео курс, я бы сказал не каждый платный дотягивает до такого уровня)

Оставить комментарий









Поиск хостинга



HDD (mb)
8000
Максимальная цена за месяц, (RUB)
700

Дополнительно







Новые статьи

















ВСЕ СТАТЬИ


Обзоры хостинга















Категории


24x7 Support Web Hosting
Angular JS Web Hosting
Apache Web Hosting
ASP.NET Web Hosting
CPanel Web Hosting
Cron Web Hosting
DirectAdmin Web Hosting
Django Web Hosting
EMail Web Hosting
FireBird Web Hosting
Free Domain Web Hosting
GIT Web Hosting
Jabber Web Hosting
Java Web Hosting
JavaScript Web Hosting
JBoss Web Hosting
JSP Web Hosting
Linux Web Hosting
MERCURIAL Web Hosting
MongoDB Web Hosting
MySQL Web Hosting
NGinx Web Hosting
NodeJS Web Hosting
Perl Web Hosting
PHP Web Hosting
PostgreSQL Web Hosting
Python Web Hosting
Ruby Web Hosting
Russian Web Hosting
Servlets Web Hosting
Spring Web Hosting
SQLite Web Hosting
SSH Web Hosting
SSL Web Hosting
Stream Web Hosting
SVN Web Hosting
TomCat Web Hosting
Unlimited HDD Space Web Hosting
Unlimited Sites Web Hosting
Unlimited Traffic Web Hosting
USA Web Hosting
VmWare Web Hosting
Windows Web Hosting