定时器的4种写法及介绍 js的定时器有哪些( 二 )_生活百科

文章插图

文章插图
Timers
上图中，左侧数字代表时间，单位毫秒；左侧文字代表某一个操作完成后，浏览器去询问当前队列中存在哪些正在等待执行的操作；蓝色方块表示正在执行的代码块；右侧文字代表在代码运行过程中，出现哪些异步事件。该图大致流程如下：

程序开始时，有一个JS代码块开始执行，执行时长约为18ms ，在执行过程中有3个异步事件触发，其中包括一个setTimeout、鼠标点击事件、setInterval
第一个setTimeout先运行，延迟时间为10ms ，稍后鼠标事件出现，浏览器在事件队列中插入点击的回调函数，稍后setInterval运行， 10ms到达之后， setTimeout向事件队列中插入setTimeout的回调
当第一个代码块执行完成后，浏览器查看队列中有哪些事件在等待，他取出排在队列最前面的代码来执行
在浏览器处理鼠标点击回调时， setInterval再次检查到到达延迟时间，他将再次向事件队列中插入一个interval的回调，以后每隔指定的延迟时间之后都会向队列中插入一个回调
后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行

这里只是对定时器的原理做一个简单版的描述，实际的处理过程比这个复杂。
四、题目答案好啦，我们现在再来看看上面的面试题的答案。第一题

alert永远都不会执行，因为JS是单线程的，且定时器的回调将在等待当前正在执行的任务完成后才执行，而while(t) {}直接就进入了死循环一直占用线程，不给回调函数执行机会

第二题

代码会输出 5 5 5 5 5 ，理由同上，当i = 0时，生成一个定时器，将回调插入到事件队列中，等待当前队列中无任务执行时立即执行，而此时for循环正在执行，所以回调被搁置。当for循环执行完成后，队列中存在着5个回调函数，他们的都将执行console.log(i)的操作，因为当前JS代码上中并没有使用块级作用域，所以i的值在for循环结束后一直为5 ，所以代码将输出5个5

第三题

这个问题涉及到this的指向问题，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的this关键字会指向window (或全局)对象， window对象中并不存在shout方法，所以就会报错，修改方案如下:

【定时器的4种写法及介绍 js的定时器有哪些】

var obj = {msg: 'obj',shout: function () {alert(this.msg);},waitAndShout: function() {var self = this; // 这里将this赋给一个变量setTimeout(function () {self.shout();}, 0);}};obj.waitAndShout();

五、需要注意的点

setTimeout有最小时间间隔限制， HTML5标准为4ms ，小于4ms按照4ms处理，但是每个浏览器实现的最小间隔都不同
因为JS引擎只有一个线程，所以它将会强制异步事件排队执行
如果setInterval的回调执行时间长于指定的延迟， setInterval将无间隔的一个接一个执行
this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决