setInterval и задержки

#javascript #setinterval

День добрый, Господа! При написании скрипта столкнулся с такой проблемой: я задал
переменной значение, затем я подставил эту переменную в setInterval в задержку, однако
при изменении этой переменной интервал между выполнениями функции не изменялся. Возник
вопрос: можно ли вообще подставить переменную как значение задержки в setInterval.
Такой код есть на данный момент, передаю вам штурвал.



setInterval(ggg, 1000);
var iter = 0;
var pulse = 90;
var time = 100;
setInterval(timer, 1000);
function ggg() {
	var aza = setInterval(ggg, 1000);
	setTimeout(ggg, 1000);
	clearInterval(aza);
	var aza = setInterval(ggg, 2000);
};
function pulsing() {
	heart.style.backgroundColor = 'red';
	setTimeout(back, 300);
		function back() {
			heart.style.backgroundColor = 'black';
		};
};
function timer() {
	time--;
};



	
	
	



	








    

Ответы

Ответ 1

Нет, переменную как значение задержки в setInterval подставить нельзя, вот почему:
setInterval выполняет код много раз через равные промежутки времени, пока он не будет
остановлен вызовом clearInterval. т.е. промежуток задается один раз (при вызове setInterval).

Для того, чтобы сделать так, как вы хотите - нужно каждый раз "уничтожать" setInterval
и заново создавать его, с уже новым промежутком(который есть у вас в переменной).

PS. это можно сделать разными способами, как один из возможных - при помощи Object.prototype.watch()
(учитывая его не поддержку:D, можно юзать - полифилл).

var timerObj = { interval: 0, timerId: 0, func: my_function}; // объект для интервала

timerObj.watch('interval', function(prop, oldval, val) {
    // тут пересоздавать сам setInterval нужно:
    if(timerObj.timerId) clearTimeout(timerObj.timerId);
    timerObj.timerId = setInterval(this.func, val);
});

timerObj.interval = 1000; // запустили интервал

// много кода

timerObj.interval = 5000; // в любом месте меняет, он сам пересоздается)

// можно еще придумать методы для полной остановки и т.д.


PPS. как в комментариях верно подметили - лучше использовать Object.defineProperty,
тогда код выглядел бы так(полифилл не нужен):

var timerObj = {timerId: 0, func: my_function}; // объект для интервала
Object.defineProperty(timerObj, 'interval', {
    set:function(val){
       if(timerObj.timerId) clearTimeout(timerObj.timerId);
       timerObj.timerId = setInterval(timerObj.func, val);
    }
});

timerObj.interval = 1000;

// много кода

timerObj.interval = 5000;


Ответ 2

Под переменной ты понимаешь: переменный период интервала. Период в setInterval статичен
- прямо в вызове setInterval нельзя его сделать переменным. Но можно сделать переменный
интервал времени другими способами.

Держи пример - каждый шаг таймера произвольный, от 0 до 1 сек:



var someAction = function(){
 console.log(new Date());
 //clearTimeout на случай - чтобы при множественном запуске someAction вне, всё было ОК
 clearTimeout(someAction.timeout);
 someAction.timeout = setTimeout(someAction, Math.random()*1000);
};
someAction();


Ответ 3

В вашем мире слишком много магии. Для начала, вам следует осознать: любое выражение,
которое вы напишите, будет вычислено сразу же, еще до того как кто-то воспользуется
его значением.

Передача переменной в setInterval ничем не отличается от передачи константы.

Для того, чтобы изменить интервал выполнения - надо пересоздать таймер.



Вставлять вызов пересоздание таймера каждый раз когда надо изменить интервал - неправильно
и нарушает принцип DRY ("не повторяйся!"). Поэтому лучше инкапсулировать таймер в объект:

function Timer (callback, interval) {
  this.callback = callback;
  this.timerId = null;
  this.setInterval(interval);
}
Timer.prototype.setInterval = function (interval) {
  if(this.timerId !== null) clearInterval(timerObj.timerId);
  this.timerId = setInterval(this.callback, val);
}

// ...

var timer = new Timer(some_function, 1000);

// ...

timer.setInterval(5000);