资讯专栏INFORMATION COLUMN

定时器:基础认知

Martin91 / 3601人阅读

摘要:因为一次性定时器只执行一次,所以确认需要调用时,不需要去清除。总结使用定时器时优先选用一次性定时器,链式调用来实现周期性定时器的效果。注意定时器的任务函数添加进任务队列和执行顺序。

定时器 定时器概念

是程序按指定的时间间隔(反复)自动的执行一项任务

定时器方法属于window对象
如果在该方法中使用this,this的值在非严格模式下返回的是window对象,在严格模式下返回的是undefined。

分为一次性定时器和周期性定时器

一次性定时器

setTimeout(),接收两个参数:要执行的代码和以毫秒表示的时间,只在等待时间到达后执行一次

第一个参数可以是一段包含JavaScript代码的字符串(和使用eval()方法的字符串相同),也可以是一个函数,建议使用函数作为参数

第二个参数表示等待时间,但需要特别注意的是,经过该段时间后,代码不一定执行。(定时器执行顺序会导致一些问题)

setTimeout(function(){
    alert(‘hello world’);
},100);
//或者
setTimeout(“alert(‘hello world’)”,100);

清除一次性定时器:
setTimeout()方法每次被调用都会返回一个新的数值,连续不重复,作为该方法的唯一标识符,如果需要取消一次性定时器,可以在执行前设置clearTimeout()。

var timeoutId=setTimeout(function(){alert(‘hello world’)},1000);
clearTimeout(timeoutId);//在未调用之前清除了定时器

只要在指定的时间之前设置clearTimeout()就可以让一次性定时器不执行。因为一次性定时器只执行一次,所以确认需要调用时,不需要去清除。

周期性定时器

setInterval(),接收的参数类型和一次性定时器相同,按照指定的时间间隔(第二个参数)去重复执行代码,直到该定时器被取消或页面被卸载。

清除周期性定时器

var i=0;
var timerID=setInterval(function(){
    console.log(i);
    i+=1;
    if (i>10){clearInterval(timerID)}
},100);

同一次性定时器相同,都会返回一个唯一标识符,在该定时器未停止之前,这个唯一标识符是不变的,下次被重新调用,会返回另一个不同的数值。在达到清除条件时,设置clearInterval(),因为周期性定时器会一直执行下去,所以必须设置清除。

定时器与调用队列

浏览器是多线程程序,可同时执行多个任务,但,JavaScript是一个单线程的解释器,一个时刻只能执行一项任务。
为了控制要执行的代码,就有一个JavaScript任务队列,这些任务会按它们添加到队列的顺序执行,定时器的任务函数会在前面代码执行完之后才执行,所以会存在等待时间超过设定的时间的情况。

例子

for(var i=0;i<3;i++){
    setTimeout("console.log(i)",0);
}
    //3,3,3

在控制台中输入以上代码,会输出三个3,原因是当浏览器读到定时器时,只是把任务函数加入了回调队列,但必须在主程序(for循环)执行完后才会执行,而主程序执行完后,i的值为3,然后调用已经在任务队列中等待的三个定时器任务函数,则都输出相同的3。

一次性定时器和周期性定时器的比较 一次性定时器模拟周期性定时器
var i=0
setTimeout(function(){
    if (i<10){                           //设置任务函数执行条件
        console.log(i);
        i+=1;
        setTimeout(arguments.callee,100);//链式调用一次性定时器
    }
},100)

使用一次性定时器时,不必跟踪定时器ID,因为每次执行代码后,如果不再设置另一次调用,定时器就会自动停止。

由于一次性定时器是在当前任务函数执行完之后,才开始执行下一次定时器函数,所以定时器中所设置的间隔时间是从当前任务函数执行完之后开始计算的,这一点和周期性定时器不同。

周期性定时器模拟一次性定时器
var timerID=setInterval(function(){
    alert("hello world");
    clearInterval(timerID);
},100);

必须设置定时器清除,否则周期性定时器会一直执行下去。

周期性定时器中的时间间隔是指每隔某段时间就调用一次,而不管每次执行任务函数花费多长时间,如果任务函数执行时间超过了设定的时间间隔,就会发生错误。

总结

使用定时器时优先选用一次性定时器,链式调用setTimeout来实现周期性定时器的效果。

注意定时器的任务函数添加进任务队列和执行顺序。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79848.html

相关文章

  • websocket初步认知

    摘要:什么是是一个持久化的协议,改协议定义了一个用以在和建立一个连接。是建立在的基础上,复用了的握手环节,握手成功后经过协商在走协议格式的数据。 什么是websocket Websocket是一个持久化的协议,改协议定义了一个 API 用以在browser和server建立一个 socket 连接。WebSocket是建立在http的基础上,复用了HTTP的握手环节,握手成功后经过协商在走W...

    lemon 评论0 收藏0
  • Easyswoole 源码学习和个人解析 目录

    摘要:易用稳定,本次想通过对的学习和个人解析,吸收框架的思想和设计知识,加强自己对的认知和理解。当然,笔者能力水平有限,后续的文章如有错误,还请指出和谅解。目录如下后续添加文章都会记录在此服务启动过程以及主体设计流程源码解析 前言 swoole是什么?官网的原话介绍是这样的: Swoole 使用纯 C 语言编写,提供了 PHP 语言的异步多线程服务器,异步 TCP/UDP 网络客户端,异步 ...

    CoXie 评论0 收藏0
  • Windows Containers 大冒险: 启程

    摘要:个人而言,这个过程中提纲挈领的两个词是元认知和路径依赖。所谓元认知就是对认知的认知,具体地说,是关于个人自己认知过程的知识和调节这些过程的能力,对思维和学习活动的知识和控制。 Windows Containers 大冒险: 启程 开场白 虽然本系列文章主要是介绍和Windows Containers的相关知识和问题处理思路,但是在讨论技术的之前还是想把个人十年的工作经验做一个简单的梳理...

    Shihira 评论0 收藏0
  • 用计算解决科学难题,用算法让生活变得更好

    摘要:一科技企业做基础科研的意义计算科学基础研究关于计算机的基础理论计算科学用计算解决科学中无法解决的难题。在微软研究院的游学中,研究院产品演示方面更聚焦在生命科学上,可能也是因为疫情,让更多科技行业开始对生命医疗进行探索。 2021-11-24,CSDN组织了《新程序员》的读者福利活动走进名企—...

    不知名网友 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<