setTimeout,setInterval的使用小结

冷暖自知 提交于 2020-02-28 12:42:18

setTimeout

众所周知setTimeout(fn,time)是等待一段时间后,执行函数fn。
在这个等待是异步的,也就是他不会站着茅坑,当前JS队列中的其他任务会按序执行
但这里有个问题就是time毫秒过后的fn执行问题。是立即执行?不一定。
这就像是一个买票的队伍,有正在买票的,有排在后面等待买票的。而setTimeout就相当于刚排到fn买票的时候他突然发现钱包一时翻不出来。
所以他就让后面的人先买。过了time时间找到钱包后,如果现在没人买票的话,他可以立即买票。否则他就只能去排队了(当所有队列中的内容执行结束后才执行)。

<input type="text" id="io" />
<div id="test" style="width:200px;height:400px;overflow:scroll;"></div>
<script>
//这个函数的执行时间在IE下肯定是大于100ms的
function lost() {
    var test = document.getElementById("test");
    var t1 = new Date();
    var html = [];
    for (var i = 0; i < 10000; i++) {
        html.push('<span>look at here</span>');
    }
    test.innerHTML = html.join("");
    var t2 = new Date();
    //return (t2 - t1) / 1000;纠正
    return t2 - t1;}

var io = document.getElementById("io");
io.value += "A";
setTimeout(function() {
    io.value += "B";
}, 100);

lost();
io.value += "C";
lost();
io.value += "D";
</script>

最后io的value为ACDB,也证明了不是100ms后立即执行,而是排到了队伍后面。

也有人见过setTimeout(fn,0);如果上面的内容理解了的话,这个也就不难了:如果没有队伍则立即执行,否则就排队去。


setInterval

setInterval(fn,time)就是一个重复的定时器。
每隔time时间,将fn推入队列(如果进程空闲则立刻执行),不管是否有fn正在执行或等待队列。
但是,如果当前队列中有正在等待的fn,则本次不会向队列中添加fn。如下

<input type="text" id="io" />
<input type="button" id="insert" value="INSERT" />
<input type="button" id="get" value="GET" />
<div id="test" style="width:200px;height:400px;overflow:scroll;"></div>
<script>
    var io = document.getElementById("io");
    var i = setInterval(function() {
        io.value += "B";
    }, 10);
    
    lost();
    lost();
    setTimeout(function() {
        clearInterval(i);
    }, 10);
    
    //IE下执行时间肯定会是10的好多倍的
    function lost() {
        var test = document.getElementById("test");
        var t1 = new Date();
        var html = [];
        for (var i = 0; i < 10000; i++) {
            html.push('<span>look at here</span>');
        }
        test.innerHTML = html.join("");
        var t2 = new Date();
        io.value += "C";
    }
</script>

结果是CCB
执行lost函数的时间是定时器的很多倍。但在这么长的时间里,定时器只向队列中推入fn一次。
这个原因也导致了以下两种不理想情况的出现。

①fn执行时间小于time的时候,经常会间隔时间不一致。

②fn执行时间大于time时,则造成没有了间隔时间(实际当中会有那么一点点的间隔)

因为这些问题,setInterval就失去了定时器的意义。

所以我们都用循环调用setTimeout来代替setInterval。原理如下

setInterval(fn,time)
//↓↓↓↓↓↓↓↓↓↓↓↓
setTimeout(function(){
    fn();
    setTimeout(arguments.callee,time);
},time);

这样就可以让每个fn之间都会至少保持time的间隔。 

注:setTimeout和setInterval的函数环境总是Window。


 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!