定时器setTimeout和setInterval的工作原理以及优缺点

我们在做项目的时候有时候会遇到一些需求，要求我们间隔一段时间执行某段代码，或者是在给定的时间内重复执行代码，从而达到某种效果。这就需要我们用到 Javascript 中的定时器方法 setTimeout 和 setInterval 来完成，这两种方法可能看起来非常像，而且显示的结果也会很相似，今天牛人博客就给大家详细的介绍一下这两种方法的工作原理以及优缺点，希望对大家有用。

具体规则是：

setTimeout（expression,milliseconds）函数用于启动在所述延迟之后调用特定功能的定时器。

setInterval（expression,milliseconds）函数用于在提到的延迟中重复执行给定的功能，一旦调用了这个函数，那么就会每隔 5 秒钟就显示一次时间，只有在取消时才停止。

其中第一个参数 expression 可以是字符串，也可以是函数名。是字符串的时候可以带参数，函数名不能带参数，如果带上参数就直接执行函数了，不会延时。第二个参数为延时的时间。

function hello (){
        console.log('I am dada');
        //alert('I am ' + name);
        //setTimeout(arguments.callee,2000);   

    }
    setTimeout(hello,5000);//5 秒后执行
    setTimeout('hello()',3000);//3 秒后执行
    setTimeout(hello(),8000);//立刻执行

以上可以看出 setTimeout 可以有三种调用方法，第一种是函数名，但是带不了参数；第二种就是字符串，可执行的 js 代码，可以带参数，但是性能上比函数名差；最后一种则是调用函数，直接执行。

所以到这里如果想要往里面传入参数，但是又不想通过字符串的形式调用，可以自己来写一个方法：

function _hello(_name){ 
        return function(){ 
            hello2(_name); 
        } 
    } 
setTimeout(_hello(name),7000);//立刻执行

setTimeout

setTimeout(function(){
    //要执行的代码                    
},200);

指隔 200ms 后,定时器代码被添加到队列中,等待 JavaScript 进程空闲后,代码才执行

setInterval

1、上面代码是指每隔 200ms 就创建一个执行代码的定时器

2、当使用 setInterval 时,仅当(在队列中)没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,引用 JavaScript 高级程序设计第三版书中语句

(即：当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中)

用 setInterval 来执行反复的行为的时候会遇到一个问题：

当定时器代码执行时间(假如需要 600ms 才执行完)超过指定间隔(这里是 200ms),那么某些定时器代码就会被跳过(即后面的定时器代码不会被添加到队列中),前一个定时器代码执行完毕后,队列中的定时器代码立刻执行,各定时器之间的代码执行没有间隔。这时，需要使用链式 setTimeout。

这样做的好处是:前一个定时器要执行的代码执行完且等待 200ms 后,才创建一个新的定时器,并把定时器代码添加到队列中执行

即：不会出现定时器代码被跳过的情况;定时器之间的代码执行可以有间隔(根据自己设置)。

setTimeout(function(){
    //要执行的代码 
    setTimeout(arguments.callee,2000);                   
},2000);
setInterval(function(){
    //要执行的代码                    
},200);

两者的最大区别就是，setTimeout 方法不会每隔 5 秒钟就执行一次 showTime 函数，它是在每次调用 setTimeout 后过 5 秒钟再去执行 showTime 函数。这意味着如果 showTime 函数的主体部分需要 2 秒钟执行完，那么整个函数则要每 7 秒钟才执行一次。而 setInterval 却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。

如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用 setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用 setTimeout。

结束语：

以上就是码云笔记前端博客为大家带来的关于定时器 setTimeout 和 setInterval 的方法介绍，定时器在一个线程内运行，因此事件可能需要排队等待执行。到最后还是建议大家最好不用 setInterval，而用 setTimeout 的延时递归来代替 setInterval。这是因为 setInterval 会产生回调堆积，特别是时间很短的时候。有说的不当之处欢迎评论补充指正。

以上关于定时器setTimeout和setInterval的工作原理以及优缺点的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。