美文网首页
window对象中的超时调用

window对象中的超时调用

作者: sortinnauto | 来源:发表于2018-05-20 21:41 被阅读0次

    JavaScript是单线程语言,但它允许通过设置超时值来调度代码在特定的时刻执行,即经过指定的时间后执行代码。通过设置window对象的setTimeout()方法就可以做到这点。
    setTimeout()方法接收两个参数:
    要执行的代码、以毫秒表示的时间(执行代码前需要等待多少毫秒)。
    这里注意两点:

    • 第一个参数建议使用函数,而不建议传入字符串。因为字符串可能会导致性能损失。
    • 第二个参数虽表示等待多少时间的毫秒数,但经过传入的毫秒数后指定的代码不一定会执行。原因如下:

    JavaScript是一个单线程解释器,因此一段时间只可以执行一段代码。为了控制要执行的代码,JavaScript会有一个任务队列。任务队列里的任务会根据它们被添加进队列的顺序执行。setTimeout()第二个参数会告诉JavaScript再过多长时间把当前任务加入任务队列中去。此时就有两种情况了:

    • 此时任务队列为空。那么添加的代码就会立即执行;
    • 此时任务队列不为空。那么它就要等之前的任务结束以后再执行。

    setTimeout()的返回值为一个超时调用ID。此ID是计划执行代码的唯一标识符,可以通过它来取消尚未执行的超时调用。要做到这点,只需要调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。下面是一个例子:

    //设置超时调用
    let timeoutId = setTimeout(function(){
       alter("Hello World!");
    });
    //取消超时调用
    clearTimeout(timeoutId);
    

    以上代码在设置超时调用之后又马上调用了clearTimeout(),结果就跟什么都没发生过一样。


    与超时调用类似的,是间歇调用setInterval(),只不过间歇调用会按照指定的时间间隔重复执行指定代码。它的参数类型与超时调用相同。
    setInterval()方法同样返回一个间歇调用ID,作用可以类比超时调用。不过,取消间歇调用clearInterval()方法的重要性要远远高于取消超时调用。因为在不干涉的情况下,间歇调用将会一直执行到页面卸载为止。下面是一个例子:

    let num = 0;
    let max = 10;
    let intervalId = null;
    
    function incrementNumber(){
        num++;
    
        if(num === max){
          clearInterval(idtervalId);
          alter("Done!");
         }
    }
    
    intervalInd = setInterval(incrementNumber, 500);
    

    相关文章

      网友评论

          本文标题:window对象中的超时调用

          本文链接:https://www.haomeiwen.com/subject/nmtxjftx.html