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。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容

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