国瑞前端
当前位置: Javascript > 前端中setTimeout和setInterval的原理以及优缺点

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

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

具体规则是:

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

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

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

1
2
3
4
5
6
7
8
9
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代码,可以带参数,但是性能上比函数名差;最后一种则是调用函数,直接执行。

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

1
2
3
4
5
6
7
function _hello(_name){
        return function(){
            hello2(_name);
        }
    }
setTimeout(_hello(name),7000);//立刻执行
setTimeout
1
2
3
setTimeout(function(){
    //要执行的代码                    
},200);

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
setTimeout(function(){
    //要执行的代码
    setTimeout(arguments.callee,2000);                  
},2000);
setInterval(function(){
    //要执行的代码                    
},200);

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

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

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"前端中setTimeout和setInterval的原理以及优缺点"

最新评论

    暂无留言哦~~

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

广告

广告

广告

广告

精彩评论

广告

站点统计

  • 文章总数: 334 篇
  • 草稿数目: 86 篇
  • 分类数目: 28 个
  • 独立页面: 5 个
  • 评论总数: 108 条
  • 链接总数: 10 个
  • 标签总数: 111 个
  • 注册用户: 176 人
  • 访问总量: 8,677,248 次
  • 最近更新: 2021年7月21日
服务热线:
 

 QQ在线交流

 旺旺在线