JS定时器

前言:对定时器的小整理。

JS单线程

  • Javascript语言的执行环境是"单线程"(single thread)。也就是说,浏览器只分配给js一个主线程用来执行任务即函数,但是每次只能执行一个任务,只有等到当前任务执行完成后,才执行后面的任务,这些任务形成一个任务队列排队等候执行

  • 为了避免因为某些长时间任务造成的无意义等待,JS引入了异步的概念,用另一个线程来管理异步任务。

  • 同步任务直接在主线程队列中顺序执行,而异步任务会进入另一个任务队列,不会阻塞主线程。等到主线程队列空了(执行完了)的时候,就会去异步队列查询是否有可执行的异步任务了(异步任务通常进入异步队列之后还要等一些条件才能执行,如ajax请求、文件读写),如果某个异步任务可以执行了便加入主线程队列,以此循环。

JS定时器

定时器也是一种异步任务,通常浏览器都有一个独立的定时器模块,定时器的延迟时间就由定时器模块来管理,当某个定时器到了可执行状态,就会被加入主线程队列。

基本计时器

  • setInterval() :以指定时间为周期循环执行
  • setTimeout(): 只在指定时间后执行一次

写法

  • setInterval(expression,milliseconds)
  • setTimeout(expression,milliseconds)
  • 其中expression既可以是字符串,也可以是匿名函数,或者是一个函数名,milliseconds是延时或者重复执行的毫秒数

例子

setTimeout(function () {
    console.log('timeout');
}, 1000);

setInterval(function () {
    console.log('interval')
}, 1000);

// 输出一次 timeout,每隔1S输出一次 interval

清除定时器

  • 定时器清除的方法:clearInterval(str)和clearTimeout(str)
  • 定时器有个返回值,该数字代表定时器的序号,即第多少个定时器,我们获取其返回值后,调用clearInterval(返回值)或clearTimeout(返回值), 即可停止计时器
  • 要清除定时器,就必须在用定时器的时候,定义一个变量来记录定时器的返回值

定时器的返回值:

 var timer1=window.setTimeout(function(){
            console.log("我是第一个定时器")
        },1000);
        console.log(timer1);//1
var timer2=window.setTimeout(function(){
            console.log("我是第二个定时器")
        },1000);
        console.log(timer2);//2

清除定时器:


var id=window.setInterval("somefunction",10000); 
//取消定时执行 
window.clearInterval(id); 
id=null;

注意:

  1. setTimeout虽然只执行一次,但执行后,定时器还在,只是没用了而已
  2. 定时器即使清除了,其返回值也不会清除,之后设置的定时器的返回值也会在其返回值的基础上继续向后排
  3. 一般清空定时器后会将清空的定时器的变量置空,这样写既可以释放内存,也可以便于后边代码的判断。

定时器传递参数

先看一下定时器的常用写法:

  1. 函数名,不带参数
    setInterval(test,1000); //1秒后执行
  2. 字符串,可以执行的代码
    setInterval('test()',1000); //1秒后执行
  3. 匿名函数
    setInterval(function(){},1000); //1秒后执行
  4. 调用函数
    setInterval(test(),1000); //立即执行

在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数

函数hello

var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
      alert("hello,"+_name);
}
window.setTimeout(hello(userName),3000);//会立即执行,不是等3秒后执行

修改:

window.setTimeout("hello(userName)",3000);

注:其他方法见

异步之定时器

setTimeout为例:

setTimeout(function(){
  console.log(0);
},0)
 
console.log(1);
 
// 1
 
// 0
  • 大家可能疑问了,setTimeout中设置的推迟执行的毫秒数是0呀,不就是立即执行的意思吗。实际在执行程序的时候,浏览器会默认setTimeout以及ajax请求这一类的方法都是耗时程序(尽管可能不耗时),所以此时的setTimeout尽管它推迟时间为0,但是js不会立即执行,而是把它加入任务队列,当执行完执行栈的同步任务也就是打印1后,再执行setTimeout的回调函数,打印0。
  • 总之,setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。
  • 所以注意的是,setTimeout()只是将事件插入了任务队列,必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。但如果当前任务十分耗时,需要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行,比如说你指定10ms后执行,但是当前的任务执行了20ms,所以setTimeout的回调函数并不能在10ms后立即执行,可能要20ms后,如果setTimeout在任务队列中不是排第一位,可能还不止20ms。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、 单线程、任务队列的概念 单线程: JavaScript是一个单线程语言,浏览器只会分配一个javascrip...
    海山城阅读 1,058评论 0 1
  • 从JS执行机制说起 浏览器(或者说JS引擎)执行JS的机制是基于事件循环。 由于JS是单线程,所以同一时间只能执行...
    love2013阅读 918评论 0 1
  • 在谈js定时器以前,我觉得有必要了解下javascript的事件运行机制,简称(javascript event ...
    JohnsonChe阅读 935评论 0 2
  • 定时器 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和se...
    李诺哦阅读 1,057评论 0 0
  • 你:亲爱的,我发现你有一种魔力,能让我一直想着你、盯着你 我:你又何尝不是!!!
    你叫我婆婆阅读 95评论 0 0