Ещё можно использовать requestAnimationFrame()
– переданная туда функция будет вызываться при каждом «кадре» перерисовки экрана – и проверять текущее время: пора, или ещё нет в очередной раз «выстрелить».
Так время следующего срабатывания, в зависимости от слайдера, проверяется не только при следующем срабатывании, а часто-часто. Можно из крайнего правого «долгого» мигания мгновенно перебросить влево на частое мигание - и это сработает сразу. Правда, похоже, у вас немного другая задача, и достаточно варианта с setTimeout()
.
var el = document.getElementById('flash')
,out = document.getElementById('out-freq')
,slider = document.getElementById('in-freq')
,period
,state = 1
,start
,next
;
function step(timestamp) {
period = parseInt( slider.value, 10);
if (!start) start = timestamp;
next = start + period;
if( next < timestamp) {
start = timestamp;
next = start + period;
out.innerHTML = slider.value;
el.style.backgroundColor = (state ^= 1) ? "#F90" : "#333";
}
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
#flash {width:40px; height:40px; border-radius:20px; background-color:#CCC;}
<input id="in-freq" type="range" min="10" max="500" step="10"> частота: <span id="out-freq"></span>
<div id="flash"></div>