javascriptのsetTimeout和setInterval

间歇调用和超时调用

javaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行.牵着在制定的事件过后执行代码,而后者则是每间隔指定的时间就执行一次代码.
超时调用需要使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和毫秒数的超时时间.

function box() {
    alert('Lee');
}
setTimeout(box, 1000);   //直接传入函数名即可

setTimeout(function() {   //推荐做法
    alert('Lee');
},1000);

PS:直接使用函数传入的方法,扩展性好,性能更佳.

var box = setTimeout(function() {  //把超时调用的ID复制给box
    alert('Lee');
},1000);    

clearTimeout(box);          //把ID传入,取消超时调用

var i = 1;
var timer = setInterval(function() {
    alert(i++);
}, 2000);

为了确保两次之间由固定的间隔,不使用setInterval

var i=1;
var timer = setTimeout(function() {
    alert(i++);
    timer = setTimeout(arguments.callee, 2000);
}, 2000);

自己部署一个函数,实现间隔时间确定的setInterval

function interval(func, wait){
    var interv = function(){
        func.call(null);
        setTimeout(interv, wait);
    };
    setTimeout(interv, wait);
}

interval(function(){
    console.log(2);
}, 1000);

setTimeout和setInterval指定的任务，一定会按照预定时间执行。它们实际上要等到当前脚本的所有同步任务执行完，然后再等到本次Event Loop的“任务队列”的所有任务执行完，才会开始执行

---

间歇调用

间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是 setInterval(),它接受的参数与 setTimeout()相同:要执行的代码和每次执行之前需要等待的毫秒数。

var box = setInterval(function() {   //获取间歇调用的ID
    alert('Lee');
},1000);

clearInterval(box);  //取消间歇调用

---

一般认为,使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下,很少使用真正的间歇调用,因为需要根据情况来取消 ID,并且可能造成同步的一些问题,我们建议不使用间歇调用,而去使用超时调用。

var num = 0;
var max = 5;

function box() {
    num++;
    document.getElemetById('a').innerHTML += num;
    if(num == max) {
        alert('5秒到了');
    }else {
        setTimeout(box, 1000);
    }
}

setTimeout(box, 1000);

---

应用:
setTimeout(f, 0):调整事件发生顺序.它实际上意味着,将任务放在浏览器最早可得的空闲时段执行,所以那些计算量大、耗时昌的任务,常常会被放到几个小部分,分别放到setTimeout(f,0)里面执行.

var div = document.getElementsByTagName('div')[0];

//写法一
for(var i=0xA00000;i<0xFFFFFF;i++) {
    div.style.backgroundcolor = '#'+i.toString(16);
}

//写法二
var timer;
var i=0x100000;

function func() {
    timer = setTimeout(func, 0);
    dic.style.backgroundcolor = '#'+i.toSting(16);
    if(i++ == 0xFFFFFF) clearInterval(timer);
}
timer = setTimeout(func, 0);