当前位置:首页 > 网站建设 > 源码技巧 > 正文内容

js定时器setTimeout和setInterval详解

热淘网2个月前 (06-22)源码技巧53

定时器

一、两种定时器

setTimeout() 延迟定时器

setInterval() 循环定时器(‘间隔器’)

定时器中的函数挂载在window对象上,内部的this指向window

 setTimeout(function(){
            console.log(111);
        },1000)  //一秒钟打印出111

  setInterval(function(){
            console.log(111);
        },1000)  //每隔一秒钟打印出1111234567


二、清除定时器

每次使用定时器时,必须清除定时器

如何清除定时器呢,每一个定时器开启后,都会返回一个对应的id,通过这个id就可以清除定时器

clearTimeout(timer) ====> 用于清除setTimeout

clearInterval(timer) ====> 用于清除setInterval

//在开启定时器的同时定义一个变量接受定时器返回的id,用于清除定时器
        var timer=setTimeout(function(){
            console.log(111);
        },1000)
        clearTimeout(timer);

        var timer2=setInterval(function(){
            console.log(111);
            clearInterval(timer2);
        },1000)12345678910


三、关于定时器函数的参数

定时器可以接受多个参数

1、第一个参数是执行的函数,必须传递,不传没什么意义,会报错

2、第二个参数为定时器执行的毫秒数,可以不传

3、第三个之后的所有参数,都将是第一个参数函数执行的实参

//没有第二个参数会立即执行
        setTimeout(function(){
            console.log(111);
        })

        setTimeout(function(a,b){
            console.log(a,b);
        },1000,10,20)12345678


HTML5标准规定了setTimeout()的第二个参数的最小值(最短间隔),不得低于4毫秒,如果低于这个值,就会自动增加,在此之前,老版本的浏览器都将最短间隔设为10毫秒,不同的浏览器实现不同

四、关于定时器的第一个参数

4.1、匿名函数

 setTimeout(function(){
            console.log(111);
        },1000)123


4.2、有名函数

  setTimeout(function haha(){
            console.log(111);
        },1000)123


4.3、有名函数的函数名

 function haha(){
            console.log(111);
        }
        setTimeout(haha,1000)1234


4.4、能被当成js语句执行的字符串

setTimeout('console.log(111)',1000)1


五、JS的单线程

5.1、单线程的理解

同时只能执行一个任务,如果后面有任务,需要等到当前任务执行完毕,才能执行后面的任务

for(var i=0;i<10;i++){
            console.log(1);
        }
        console.log(2);1234


js的单线程就是说上面的代码,无论for循环多么耗时,都必须先执行完,再打印2,这就会造成线程阻塞的问题

5.2、线程阻塞

前面的任务死循环或者耗时过长导致后面代码不能被执行,这种情况叫做线程阻塞。

这样会出现问题,所以对于像事件,定时器,ajax请求这种非常耗时的程序,浏览器会开辟其他的线程来处理,所以这些程序我们叫做异步程序

浏览器有三个常驻线程,JS引擎线程,界面的渲染线程,已经浏览器事件触发线程,还有一些执行完就终止的线程,比如HTTP请求线程

for(var i = 0; i< 5; i++){
    setTimeout(function(){
        console.log(i)
    },1000)}   //5 12345


5.3、同步任务和异步任务

js的单线程意味着所有的任务需要排队,前一个任务结束,才会执行后一个任务,如果前一个任务耗时很长,后一个任务就不得不一直等着

所以JS的任务队列分为两种,同步任务和异步任务

1、同步任务:在JS主线程排队执行的任务 ===>形成执行栈

2、异步任务:不进入主线程进入‘任务队列’的任务 ===> 形成任务队列

异步任务只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行

  setTimeout(function(){
            console.log(1)
        },0)
        for(var i = 0; i< 10;i++){
            console.log(2)
        } //定时器会等待for循环执行完毕后再执行123456


当js遇到定时器,它会认为你特别耗时间,不管你写的时间间隔是多久,都会将匿名函数放到callback queue回调队列中,等待主线程的调用,当主线程的stack所有的任务都执行完了,再通过event loop(时间循环)把匿名函数放到stack主线程中运行

5.4、JS代码的执行顺序

先执行主程序的任务,当主程序的所有任务都执行结束,再把任务队列中的任务放到主程序中执行

1、所有的同步任务都在主线程上执行,形成一个执行栈

2、主线程之外,还存在一个‘任务队列’,只要异步任务有了运行结果,就在‘任务队列’之中放置一个事件

3、一旦‘执行栈’中的所有同步任务执行完毕,系统就会读取‘任务队列’,看看里面有哪些事件,那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行

4、主线程不断重复上面的第三步



扫描二维码推送至手机访问。

版权声明:本文由热淘网发布,如需转载请注明出处。

本文链接:https://www.retao5.com/yuanma/1565.html

标签: 定时器
分享给朋友:

相关文章

当前位置:首页>>资讯"去掉这里的"资讯"!

当前位置:首页>>资讯"去掉这里的"资讯"!

步骤①根目录下找到 news.php找到 [list=1][*]$guidearr[] = array('url' =˃ geturl('action/news'),'name' =˃ $lang['...

模块创建使用技巧

模块创建使用技巧

在创建模块处。。如果你选择了只获取数据[b]使用获得的模板内部调用代码[/b]注:模板代码此处不赘述。将上面获取的代码复制到 SupeSite 的模板文件中(默认模板的目录为 templates/de...

在模版中直接写判断语句的格式举例

在模版中直接写判断语句的格式举例

[code] 会员登陆 注册你好:$_SGLOBAL[supe_username][/code]...

过滤ss模块调用乱七八糟的字符

过滤ss模块调用乱七八糟的字符

[code]function htmldecode($str){if(empty($str)) return;if($str=="") return $str;$str=dhtmlspecialcha...

论坛URL静态化教程

论坛URL静态化教程

[i=s] 本帖最后由 木兴 于 2010-8-18 20:39 编辑 [/i] 如何设置论坛[b][color=#ff0000]静态化[/color][/b]:1登陆论坛后台,全局,优化设置。如下...

unix 操作系统下直接将数据库文件拷贝移而产生这个错误【解决办法

unix 操作系统下直接将数据库文件拷贝移而产生这个错误【解决办法

[b]错误编号:[/b]145[b]问题分析:[/b]这种情况是不能打开 %s.MYI 造成的,引起这种情况可能的原因有:1、服务器非正常关机,数据库所在空间已满,或一些其它未知的原因,对数据库表造成...

评论列表

亚马逊拍图
1个月前 (07-10)

以后多来这里学习,请各位多多指教

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。