Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Практика - Метод getTime Интервал времени - setInterval и clearInterval Функция typeof - Тип объекта

Интервал времени в Javascript - Методы setTimeout, setInterval и clearInterval объекта Window

Еще об объектах - Создание объекта

Урок №1 Интервал времени - setInterval и clearInterval

Количество просмотров: 498

Здесь будут рассмотрены методы setTimeout, setInterval и clearInterval объекта Window, которые предназначены для отсроченного выполнения какого-либо кода.

В javascript нередко используется интервал времени для задержки исполнении кода.

Метод setTimeout - Однократное выполнение кода через интервал времени

Метод setTimeout - Однократное выполнение кода через интервал времени

Метод setTimeout предназначен для однократного выполнения какого-либо кода через заданный промежуток времени.

Интервал времени указывается в миллисекундах.

setTimeout(код,время)

<script type="text/javascript">

setTimeout("alert('Test');",3000)

</script>

Как Вы наглядно смогли убедиться, метод setTimeout вернул выполнение кода через указанный промежуток времени - 3000 миллиСекунд (это 3 секунды).

Но удобнее javascript-код поместить в функцию, которую затем указать в качестве первого параметра метода setTimeout.

<script type="text/javascript">

function time()
{
alert("Test");
}

setTimeout(time,3000) /* Функция и время */

</script>

Результат тот же, что и в предыдущем примере.

Метод setInterval - Многократное выполнение кода через интервал времени

Метод setInterval - Многократное выполнение кода через интервал времени

Метод setInterval предназначен для многократного выполнения кода через указанный интервал времени.

Метод setInterval возвращает идентификатор, по которому можно отменить выполнение кода (об этом далее...).

<script type="text/javascript">

function time()
{
alert("Нажмите ОК и подождите еще 7 секунд");
}

setInterval (time,7000);

</script>

Как видно из примера - одно и то же действие (всплывающее окно) повторяется через интервал в 7 секунд. И так до бесконечности...

Метод clearInterval - Прерывает запланированное выполнение кода

Метод clearInterval - Прерывает запланированное выполнение кода

С помощью метода clearInterval можно прервать запланированное методом setInterval выполнение кода.

Для этого воспользуемся идентификатором, возвращаемым методом setInterval (идентификатор помещают в произвольную переменную).

<script type="text/javascript">

function time()
{
alert("Нажмите ОК и подождите еще 7 секунд");
}

var idInt = setInterval (time,7000); /* Помещаем Идентификатор, возвращаемый методом setInterval в переменную idInt */

clearInterval(idInt); /* переменную idInt указываем в качестве параметра метода clearInterval */

</script>

Итак, еще раз повторим, что мы делаем в этом примере:

  • Метод setInterval возвращает идентификатор, который мы помещаем в произвольную переменную idInt.
  • Переменную idInt используем в любом месте программы в качестве параметра метода clearInterval для прерывания многократного действия, совершаемого методом setInterval.

Домашнее задание - Методы setInterval и clearInterval

Домашнее задание - Методы setInterval и clearInterval

Использование интервалов в javascript. Решаем самостоятельно задачу по этой теме.

Для решения задания нужно работать с методами setInterval и clearInterval.

1-я часть задачи:

Нужно создать интервал, который выводит в консоль количество секунд, прошедших с момента запуска программы.

"Прошло: 1 сек."

"Прошло: 2 сек." // И так далее

2-я часть задачи:

Допишите программу так, чтобы она останавливалась при достижении 5 секунд и надпись о пройденном времени больше не выводилась в консоль.

Реализуем 1-ю часть задания

<script type="text/javascript">

var i = 0;

setInterval(
function(){
i++;
console.log("Прошло " + i + " сек.");
},1000);

</script>

Реализуем 2-ю часть задания

<script type="text/javascript">

var i = 0;
function any(){
i++;
console.log("Прошло " + i + " сек.");
if(i == 5){
clearInterval(id);
}
}

id = setInterval(any,1000);

</script>

/* Пожалуй, этот код выглядит немного коряво. Думаю, что следующая запись будет предпочтительней */

<script type="text/javascript">

var i = 0;

var id = setInterval(
function(){
i++;
console.log("Прошло " + i + " сек.");
if(i == 5){
clearInterval(id);
}
},1000)

</script>

Как видите, оба варианта кода дают один и тот же результат.

Главная Изучаем JavaScript Интервал времени - setInterval и clearInterval Функция typeof - Тип объекта

Ваши комментарии к уроку:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru