JS基础知识梳理--setTimeout()&setInterval()

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_30758821

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xxyy1122/p/4884316.html

本文详细介绍了JavaScript中的setTimeout和setInterval函数的使用方法及其区别。setTimeout用于超时执行，即在指定时间后执行一次；setInterval用于间隔执行，即按指定时间间隔重复执行。文章还探讨了它们的任务队列特性及如何控制执行次数。

（一），setTimeout();超时执行，超过一个时间点执行一次

setTimeout(fun,time);//fun：要执行的代码。time：等待执行的时间

执行和取消

1 var timeoutId = setTimeout(function(){
2     alert('hello word')
3 },1000);//一秒后执行
4 
5 clearTimeout(timeoutId);//取消定时器方法

小结：第二个参数表示等待多长时间的毫秒数，但是经过该时间代码不一定会执行。因为JavaScript是一个单线程解析器，因此一段时间内只能执行一段代码。为了控制代码执行，就会有一个JavaScript任务队列，这些任务会按照他们添加的顺序执行。setTimeout(),第二个参数是告诉JavaScript再过多长时间把当前的任务添加到队列中。如果队列是空的，那么添加的代码会立即执行。如果不是空的，就要等到队列前的代码执行完毕以后再执行。

（二），setInterval();间隔执行，每隔一个时间点，执行一次。

setInterval(fun,time);//fun：要执行的代码。time：代码执行的间隔

var timeoutId = setInterval(function(){
    alert('hello word')
},1000);//每一秒执行一次

setInterval(timeoutId);//取消间隔执行

小结：拥有和setTimeout()一样的任务队列特性，且在不干涉的情况下，间歇执行会一直执行到页面被卸载。

（三）对比

setTimeout()，执行10次

var star = 0,
max  = 10;

function setTimeoutFun(){
    star++;

    //如果执行的次数还没有达到最大值，那么执行
    if( star < max ){
        setTimeout(setTimeoutFun,1000);
    }else{
        console.log("stop");
    }
    console.log(123);
}

setTimeout(setTimeoutFun,1000);

setInterval()，执行10次

var star   = 0,
      max  = 10,
      auto  = null;

function setIntervalFun(){
    star++;

    //如果大于了10次，那么清除
    if( star >= max ){
        clearInterval(auto);
        console.log("stop");
    }
    console.log(star);
}

auto = setInterval(setIntervalFun,1000);

总结：在执行超时调用是，如果没有特殊需要，没有比较跟踪ID。因为没执行完代码以后，就会自动停止。使用超时调用来模拟间隔调用是一种最佳的模式，因为后一个间隔调用可能会在前一个间歇调用结束前启动。而使用超时调用则可以避免这一点。

转载于:https://www.cnblogs.com/xxyy1122/p/4884316.html