Javascript.RU

setInterval

Синтаксис

intervalID = window.setInterval(func|code, delay)

Аргументы

func|code
Функция или строка кода для выполнения
delay
Интервал в миллисекундах, т.е 1000 это 1 секунда

Описание, примеры

В отличие от метода setTimeout, setInterval выполняет код много раз, через равные промежутки времени, пока не будет остановлен при помощи clearInterval.

В каком виде указывать первый параметр - разницы нет.
При указании строки кода - динамически создается функция с телом code.

Следующие два вызова почти одинаковы:

// (1)
setInterval('alert("прошла секунда")', 1000) 

// (2)
function sec() { 
  alert("прошла секунда")
}
setInterval(sec, 1000) // использовать функцию

Но более правильным считается объявление функции в явном виде, например так:

setInterval(function() { alert(...) }, 1000)

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

this

Функция выполняется в другом контексте, со значением this = window, поэтому о передаче правильного this надо позаботиться отдельно.

object = { 
   func: function() { alert(this) }
}

setInterval( object.func , 1000) // this будет равно window

// правильный вариант с передачей this
setInterval( function() { object.func.call(object) } , 1000)

Отмена выполнения

Вы можете отменить выполнение setInterval при помощи clearInterval, используя для этого идентификатор intervalID.

var intervalID = setInterval(...)
clearInterval(intervalID)

Автор: JSprog, дата: 16 августа, 2009 - 19:57
#permalink

Спасибо. Очень помогло.


Автор: Ramzess, дата: 19 сентября, 2009 - 23:42
#permalink

Я как-то писал программу, которая отсчитывает 60 секунд в обратном порядке.
Так вот, когда значение опускается до 56, интервал отсчёта составляет уже две секунды, потом 4, потом я сам со счёта сбился... В чём проблема, нужно парсить время отсчёта, или датить?


Автор: Гость (не зарегистрирован), дата: 2 ноября, 2009 - 12:39
#permalink

Недавно встретил эту функцию. Сам, только начал изучать веб-дизайн.


Автор: антигерой (не зарегистрирован), дата: 6 декабря, 2009 - 07:37
#permalink

Значение задержки ничуть не в милисекундах.

Счас вот гоняю цикл с НУЛЁВОЙ задержкой - а всёравно отрабатывается относительно медленно.

Немогу понять - в чём причина. Надо много быстрее чтобы работало.


Автор: Гость (не зарегистрирован), дата: 26 января, 2010 - 11:49
#permalink

Попробуй использовать setTimer(); мне помогает


Автор: Гость (не зарегистрирован), дата: 13 апреля, 2010 - 00:34
#permalink

Вызывайте первый раз функцию без очереди.

setInterval(foo, 1000);
foo();

function foo () {...}


Автор: Гость (не зарегистрирован), дата: 25 марта, 2011 - 03:09
#permalink

Мне помогло! Большое спасибо!
Задача была подгружать периодически с небольшим интервалом HTML из файла, на сервере и актуально обновлять таким образом информацию без перезагрузки страницы.
Вот код, который у меня получился, вдруг кому пригодится.
(в скрипте использовалась библиотека скриптов Jquery)
$(document).ready(function() {
setInterval(foo, 5000);
foo();
function foo () {$('#divClass').load('yourFile.html');}
});


Автор: Андрей38, дата: 15 апреля, 2011 - 01:09
#permalink

Вот код, который у меня получился, вдруг кому пригодится.
(в скрипте использовалась библиотека скриптов Jquery)
$(document).ready(function() {
setInterval(foo, 5000);
foo();
function foo () {$('#divClass').load('yourFile.html');}
});
Да!Конечно пригодиться !Cпасибо !


Автор: Scriptin (не зарегистрирован), дата: 14 августа, 2010 - 17:03
#permalink

Для цикла с нулевой задержкой используйте

for(;;) { 
  /* здесь любой код, но обязательно должна быть 
     хотя бы одна инструкция break для выхода */ 
}

Автор: Костя Шахмуров (не зарегистрирован), дата: 3 октября, 2010 - 17:33
#permalink

Как-то не нравится мне выражение "Но более правильным считается..." в справочнике. Если это справочник, то достаточно привести несколько примеров, и пользователь уже сам решит, что для него правильней. А если это учебник, то нужно аргументировать - почему это более правильно, чем другое. Мне что-то никак не понятно, почему более правильно задавать тело функции (которое может быть большим) прямо в вызове setInterval. Не лучше ли задать функцию где-то в сторонке, а в вызове setInterval указать только её имя?


Автор: jingvar (не зарегистрирован), дата: 22 октября, 2010 - 12:31
#permalink

setInterval('alert("прошла секунда")', 1000)

Хороший прикол. У меня в лисичке 70 страничек было открыто, вырубить только по F4 удалось.


Автор: uWeb, дата: 29 октября, 2010 - 17:14
#permalink

setInterval(function () {
alert("прошла секунда");
}, 1000);


Автор: Гость (не зарегистрирован), дата: 25 октября, 2010 - 17:40
#permalink

Почему-то эта функция работает как setTimout :-(
Контекст следующий:
есть функция:
function dlt(){
document.getElementById('count').value=ti10s;
ti10s--;

и 3 кнопки:


Так вот поле count обновляется всякий раз только по нажатию кнопки start, а не через каждые полсекунды , как замышлялось.
В чем может быть причина?

Автор: EuroFlock (не зарегистрирован), дата: 31 октября, 2010 - 10:44
#permalink

Рано или поздно может понадобиться передавать параметры в ту функцию, которая вызывается через указанный период времени. Делается это очень просто, все параметры указываются после миллисекунд и не нужно писать громоздкую функцию:

var time=1;
var name="first";
 
function timer(t,n) {
     alert(n+t);
     time++;
}

setInterval(timer, 1000, time, name); //setTimeout(timer, 1000, time, name);

Автор: Technobulka (не зарегистрирован), дата: 21 февраля, 2011 - 00:17
#permalink

как быть, если мне надо запихнуть функцию с переменной? например:
function move(direction) { ... }
setInterval(move(true), 1000);


Автор: pavelb (не зарегистрирован), дата: 8 июня, 2011 - 12:21
#permalink

Вызов alert | confirm останавливает выполнение setInterval (поскольку модальное окно). Следующий код будет всегда ждать нажатия с клавиатуры:

<html>
<body onload='f1()'>
<script>
 function f1(){
  setInterval('alert("!!!")',1000);
 }
</script>
</body>
</html>

Автор: Pavelob (не зарегистрирован), дата: 8 октября, 2011 - 02:50
#permalink

У меня довольно скользкий вопрос:
делал слайдшоу

<img id="photo1" style="position: relative; z-index: 200; display: block;width:100%;">
<img id="photo2" style="position: relative; z-index: 100; display: none;width:100%;">
<script>
 var imgs = ["images/slide/f1.jpg",
 "images/slide/f2.jpg",
 "images/slide/f3.jpg",
 "images/slide/f4.jpg"];
 var j=1;

var cnt = imgs.length-1; 

jQuery('#photo1').attr('src',imgs[0]);

jQuery('#photo2').attr('src',imgs[1]);

setInterval("photos()",10000);
function photos() {
jQuery('#photo1').fadeOut(1000, function() {
jQuery(this).attr('src',imgs[j]).fadeIn(1000);
});
j++;
if(j>cnt) {
j=0;
}
jQuery('#photo2').attr('src',imgs[j]);
}

Все работает отлично только 1 минус при каждой смене фотографии идет скачет на эту фотографию при выполнении setInterval("photos()",10000);
если страничка длинная то когда прокручиваю вниз страницу при смене фотографии опять прокручивается на нее как это исправить ?


Автор: Sn0oSm0oMrIK (не зарегистрирован), дата: 7 марта, 2012 - 00:08
#permalink

Как вариант, грузить все картинки сразу, задав всем кроме активной display:none, а при следующей итерации интервала скрывать все и показывать следующую.
Конечно, если картинок много, то это не лучший вариант...


Автор: Гость (не зарегистрирован), дата: 20 октября, 2011 - 18:39
#permalink

Здравствуйте, допустим есть следующий код:

setInterval(function(){
        $('#slide').animate({
            left:$(this).attr('left')
        });
}, 5000);

При неактивной вкладке в firefox или chrome интервал времени продолжает считаться, но анимация останавливается в фоне, после перехода на вкладку элементы начинают "перебегать" без интервала пока не сменятся столько раз, сколько бы сменились в фоновом режиме вкладки...
Как бороться с этим? Как остановить счетчик времени в setInterval() или заставить анимацию исполняться в фоновой вкладке?


Автор: Гость (не зарегистрирован), дата: 24 октября, 2011 - 11:30
#permalink

Насколько мне известно, невозможно заставить браузеры воспроизводить анимацию в фоновой вкладке. Я даже удивлен, что интервал вообще работает, т.к. мои наблюдения показывали, что исполнение кода вообще приостанавливается, и не только JS, но и расширений (flash). И это логично: если пользователь не смотрит на страницу сайта - он с ней не взаимодействует, а значит нет никакого смысла запускать "свистелки" и "дуделки". А также мы имеем более правильную информацию в таких системах, как google analytics, которые сообщают сколько времени пользователь реально контактировал с сайтом.


Автор: Sn0oSm0oMrIK (не зарегистрирован), дата: 7 марта, 2012 - 00:00
#permalink

Это, в принципе, верный подход. Но что если кому-то нужно прикрутить js-ный таймер или еще какую-то вещь, требующую более или менее точного подсчета времени от начала использования интервала?
С этой стороны хорошо, что setInterval работает и в фоне.


Автор: KiTE, дата: 17 декабря, 2011 - 03:50
#permalink

Я делал костыль.
Перед запуском анимации ставил свой флаг состояния. А после завершения его снимал. А, в начале интервального обработчика делал проверку.

На примере вашего кода это будет выглядеть так:

setInterval(function(){
    if( !$('#slide').data('animated') ){
        $('#slide').data('animated', true);
        $('#slide').animate({
            left:$(this).attr('left')
        }, function(){
            $('#slide').data('animated', false);
        });
    }
}, 5000);

Получается что, когда вкладка становится неактивной, анимация приостанавливается, и калбек аниматора в неактивной вкладке не отработает. То есть, setInterval в неактивной вкладке будет гонять пустые циклы. В момент активации вкладки анимация дойдет до конца, флаг сбросится и весь механизм заработает заново.


Автор: Tails, дата: 15 февраля, 2012 - 23:34
#permalink

setInterval(function() { alert(...) }, 1000)
Анонимная функция - рекомендуемое решение ? очень сомнительный совет.


Автор: Гость (не зарегистрирован), дата: 26 февраля, 2012 - 11:40
#permalink

а можно место alert написать document.write


Автор: Sn0oSm0oMrIK (не зарегистрирован), дата: 6 марта, 2012 - 23:54
#permalink

Можно.


Автор: Sn0oSm0oMrIK (не зарегистрирован), дата: 6 марта, 2012 - 23:52
#permalink

А возможно ли как-нибудь в качестве задержки использовать переменную?
что-то вроде этого:

var delay = 1000
setInterval(function() {
    alert(...);
    delay += 100;
}, delay);

Автор: gyrdym, дата: 7 апреля, 2012 - 01:07
#permalink

интервал создастся один раз, изменение переменной delay внутри функции никак не повлияет на интервал.


Автор: gyrdym, дата: 6 апреля, 2012 - 12:45
#permalink

Впринципе, можно и подобие многопоточности реализовать в яваскрипте))))


Автор: Гость (не зарегистрирован), дата: 21 мая, 2012 - 04:28
#permalink

var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}

Stop


Автор: Гость (не зарегистрирован), дата: 21 мая, 2012 - 04:29
#permalink
<body>

<input type="text" id="clock" />
<script language=javascript>
var int=self.setInterval("clock()",1000);
function clock()
  {
  var d=new Date();
  var t=d.toLocaleTimeString();
  document.getElementById("clock").value=t;
  }
</script>

<button onclick="int=window.clearInterval(int)">Stop</button>

</body>

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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
14 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Реклама

Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние темы на форуме
Forum
Последние комментарии