Справочник javascript: setInterval

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)

См. также

setTimeout /Метод/
Очерёдность событий и синхронизация в JavaScript /Статья/

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

#permalink

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

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

#permalink

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

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

#permalink

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

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

#permalink

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

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

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

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

#permalink

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

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

#permalink

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

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

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

#permalink

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

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

Автор: EuroFlock (не зарегистрирован), дата: 31 октября, 2010 - 09: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 (не зарегистрирован), дата: 20 февраля, 2011 - 23:17

#permalink

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

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

#permalink

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

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

Автор: Pavelob (не зарегистрирован), дата: 8 октября, 2011 - 01: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);
если страничка длинная то когда прокручиваю вниз страницу при смене фотографии опять прокручивается на нее как это исправить ?

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

#permalink

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

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

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

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

#permalink

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

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

#permalink

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

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

#permalink

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

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

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

#permalink

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

Автор: Гость (не зарегистрирован), дата: 13 августа, 2012 - 22:01

#permalink

тестил скорость перерисовки canvas

$(function(){
	canvas = document.getElementById("canvas");
	c = canvas.getContext("2d");
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	window.onresize = function(e){
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	}
	function setPixel(imageData, x, y, r, g, b, a) {
    index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
	}
	// read the width and height of the canvas
	width = canvas.width;
	height = canvas.height;
	// create a new pixel array
	setInterval(function(){
		// draw random dots
		image = c.createImageData(width, height);
		for (i = 0; i < 1000; i++) {
		    x = Math.random() * width | 0; // |0 to truncate to Int32
		    y = Math.random() * height | 0;
		    r = Math.random() * 256 | 0;
		    g = Math.random() * 256 | 0;
		    b = Math.random() * 256 | 0;
		    setPixel(image, x, y, r, g, b, 255); // 255 opaque
		}
		// copy the image data back onto the canvas
		c.putImageData(image, 0, 0); // at coords 0,0
	}, 40) // 25 frames per second
});

<!HTML>
<html>
	<head>
		<script type="text/javascript" src="/js/script.js"></script>
	</head>
	<body 
		style="width:100%;height:100%;background:#000;">
		<canvas 
			id="canvas" 
			style="position:absolute;top:0;left:0;">
			canvas
		</canvas>
	</body>
</html>

работает превосходно, но где то раз в 3 секунды, изображение замирает на долю секунды, как будто пара - другая запусков не срабатывает
кто нибудь наблюдал нечто подобное? и если да, то как пофиксил?

Автор: WarGot (не зарегистрирован), дата: 11 октября, 2012 - 11:11

#permalink

Полезная статья. Спасибо, помогло с разработкой чата.

Автор: Гость (не зарегистрирован), дата: 27 декабря, 2012 - 03:40

#permalink

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

Автор: Гость (не зарегистрирован), дата: 5 января, 2013 - 18:34

#permalink

самый непонятный справочник

Автор: vitnet (не зарегистрирован), дата: 15 марта, 2013 - 14:08

#permalink

Подскажите пожалуйста как быть с таким примером, как полностью остановить new_1 и new_2 и вставить new_3?

var new_1 = "text 1";
var new_2 = "text 2";
var new_3 = document.title;

function new_msg(){
    if(document.title == new_2){
         document.title = new_1;
    }else{
         document.title = new_2;
    }
}
var timer = setInterval(new_msg,1000);

Автор: Гость (не зарегистрирован), дата: 14 апреля, 2013 - 03:29

#permalink

setInterval("skClick(6,3);", 1000)
помогите прочитать что обозначает команда skClick(6,3) и именно цифры (6,3)

Автор: Гость (не зарегистрирован), дата: 9 июля, 2013 - 23:29

#permalink

Такой вопрос:

Написал скрипт, который плавно предает объекту прозрачность:

setTimeout(function() {document.getElementById('element').style.opacity = '1.0'}, 50)
setTimeout(function() {document.getElementById('element').style.opacity = '0.9'}, 100)
setTimeout(function() {document.getElementById('element').style.opacity = '0.8'}, 150)
setTimeout(function() {document.getElementById('element').style.opacity = '0.7'}, 200)
setTimeout(function() {document.getElementById('element').style.opacity = '0.6'}, 250)
setTimeout(function() {document.getElementById('element').style.opacity = '0.5'}, 300)

Можно ли сделать это с помощью setInterval, чтобы не городить адское количество программного кода, или есть какой - то другой способ это сделать?

Автор: Гость (не зарегистрирован), дата: 9 августа, 2013 - 11:14

#permalink

А чтоб заставить SetInterval при запуске обновить инфу в элементе (а далее через период).

Автор: dvomaks (не зарегистрирован), дата: 4 апреля, 2014 - 17:25

#permalink

Поломал мозг, почему не срабатывает setInterval. Может решение и лежит где-то на поверхности, но я в ступоре. Аж в голове булькает - так мозг кипит.

$(document).ready(function () {
    setInterval(Load, 2000); // создаём таймер который будет вызывать загрузку сообщений каждые 2 секунды (2000 милесукунд)
});

var load_in_process = false; 

function Load() {
    // Проверяем можем ли мы загружать сообщения. Это сделанно для того, что бы мы не начали загрузку заново, если старая загрузка ещё не закончилась.
    if(!load_in_process)
    {
	    load_in_process = true; // загрузка началась
	    
    	$.post("/auction.php", 
    	{
      	    act: "load", // указываем на то что это загрузка сообщений
			rand: (new Date()).getTime()
    	},
		function(data){
			$('#bank').empty();
			$('#bank').append(data[0]);
			$('#bet').empty();
			$('#bet').append(data[1]);
			$('#betted').empty();
			$('#betted').append(data[2]);
			$('#time').empty();
			$('#time').append(data[3]);
		},
			'json'
		);
    }
}

Автор: Гость (не зарегистрирован), дата: 7 апреля, 2014 - 10:00

#permalink

$(document).ready надо вызывать поcле объявление Load

Автор: Жека11112 (не зарегистрирован), дата: 12 мая, 2014 - 08:45

#permalink

Добрый день!
Как сделать так что-бы у меня обновлялось количество новых сообщений, например как в контакте.
Или например есть сайт с анекдотами, и при добавлении в определенную категорию анекдота счетчик количества анекдотов добавлял в той сумме +1

Автор: SnegManul (не зарегистрирован), дата: 29 мая, 2014 - 06:34

#permalink

Я в js не силен, если у кого есть время буду рад помощи

var array =  [    
    [5402,13784],
    [73542,13785],
    ]
 
var i = 0;
    

function farming() {

    Accountmanager.farm.sendUnits(this,array[i][0],array[i][1]);

    if (i < 2) {
      i++; 
    }
    if(i==2){
      i=0;
    // необходимо что бы при совпадении этого условия делалась задержка на 10 минут например. И рекурсии дальше продолжалась.  Пока работает нон стопом рекурсия делает круг и по новой.
    }
}

setInterval(farming, 500);

Пытался нагуглить, но не смог найти.

Автор: Calvin (не зарегистрирован), дата: 4 июня, 2014 - 01:51

#permalink

Вот за это
setInterval( function() { object.func.call(object) } , 1000)

только для того чтобы передать параметр javascript должен быть уничтожен

Автор: Jekel, дата: 27 июня, 2014 - 12:47

#permalink

Чего this._timerBeep() выполняется только один раз?

var Module = sys.Class.extend({

    _init: function() {
        console.log('_init!');
        setInterval(this._timerBeep(), 1000);
    },

    _timerBeep: function(){
        console.log('_timerBeep!');
        this.update();
        this.draw();
    },

    update: function() {
        console.log('update!');
    },

    draw: function(){
        console.log('draw!');
    }

});

Module2 = Module.extend();
new Module2();

Console log:

_init!
_timerBeep!
update!
draw!

Автор: manYhis, дата: 7 октября, 2014 - 12:50

#permalink

Я хотел бы спросить влияет ли использования много интервалов setIntervals, на зависания компа , у меня через интервалы идут запросы к базе не всегда интервал всегда включен но запросы идет по определенным действия пользователя, или мой комп глючит или на самом деле и влияет, буду благодарен за разумный ответ

Автор: BRIGSS, дата: 11 марта, 2015 - 17:55

#permalink

как не оборачивая в функцию писать код в setInterval("alert(1)
alert(6);
", 100)

Автор: Avissian, дата: 7 сентября, 2015 - 12:09

#permalink

Почему-то описание неверное. Вот так же:
var intervalId = setInterval(func / code, delay[, arg1, arg2...])

Нюанс использования аргументов не описан. Следующий код под Node.js показывает суть

var b = [];
var test = function (txt) {
  console.log('Elapsed ' + txt);
};

for (i = 0; i < 10; i++)
  b.push(setInterval(function (/*arg1*/a) {
    test(/*arg1*/a + ' ' + /*no arg*/i);
  }, 1000, /*arg1*/i));

i = 5;

Вывод:
Elapsed 0 5
Elapsed 1 5
Elapsed 2 5
Elapsed 3 5
Elapsed 4 5
Elapsed 5 5
Elapsed 6 5
Elapsed 7 5
Elapsed 8 5
Elapsed 9 5
...

Автор: Гость (не зарегистрирован), дата: 23 марта, 2017 - 11:52

#permalink

Добрый день.

Есть слайдер подскажите как пушить смену баннера, выводя значения атрибута, с помощью setInterval

Я совсем мало что понимаю в js... Буду признателен за помощь

var timerId = setInterval(function() {
console.log( $('.flex-active-slide a').attr('name') );
}, 1000);

Автор: Гость (не зарегистрирован), дата: 15 ноября, 2017 - 09:19

#permalink

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

, как правильно сделать поочередное изменение цвета в каждой из строк, через некий промежуток времени. С изменением цвета отдельной строки вроде получается перебирая добавленные классы:

var color = ['color1', 'color2', 'color3'];
var i = -1;
function fun(){
i=(i + 1)%color.length;
document.querySelector('p').className = color[i];
}
setInterval(fun, 5000);

Но перебирать сразу и строки и цвета для них не выходи.
Можно сделать просто перебор цветов для каждой отдельно, но не знаю правильно ли это будет..