定时器 |
JS提供了一些原生方法来实现延时去执行某一段代码,下面简单介绍两种计时器。
-
setTimeOut:
setTimeOut(code,millisec,lang) code:必选,要调用的函数后要执行的JavaScript代码串。 millisec:必选,在执行代码前需等待的毫秒数。 lang:可选,脚本语言可是是:JScript/VBScript/JavaScript
-
setInterVal:
setInterVal(code,millisec,lang) code:必选,要调用的函数后要执行的JavaScript代码串。 millisec:必选,在执行代码前需等待的毫秒数。 lang:可选,脚本语言可是是:JScript/VBScript/JavaScript
基本用法 |
- setTimeOut:
<script type="text/javascript">
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);//3s后输出一次"Hello"
}
</script>
- setInterVal:
<script type="text/javascript">
function myFunction()
{
setInterval(function(){alert("Hello")},3000);//每3s输出一次"Hello"
}
</script>
// 下面代码执行之后会输出什么?
var intervalId, timeoutId;
timeoutId = setTimeout(function () {
console.log(1);
}, 300);
setTimeout(function () {
clearTimeout(timeoutId);
console.log(2);
}, 100);
setTimeout('console.log("5")', 400);
intervalId = setInterval(function () {
console.log(4);
clearInterval(intervalId);
}, 200);
//分别输出2 4 5,clearTimeout是取消设定的定时器
定时器题目 |
题目一
题目二
题目三
JS定时器的工作原理 |
上图中,左侧数字代表时间,单位毫秒;左侧文字代表某一个操作完成后,浏览器去询问当前队列中存在哪些正在等待执行的操作;蓝色方块表示正在执行的代码块;右侧文字代表在代码运行过程中,出现哪些异步事件。该图大致流程如下:
-
程序开始时,有一个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方法,所以就会报错,修改方案如下:
var obj = {
msg: 'obj',
shout: function () {
alert(this.msg);
},
waitAndShout: function() {
var self = this; // 这里将this赋给一个变量
setTimeout(function () {
self.shout();
}, 0);
}
};
obj.waitAndShout();
关于JS定时器 |
-
setTimeout有最小时间间隔限制,HTML5标准为4ms,小于4ms按照4ms处理,但是每个浏览器实现的最小间隔都不同
-
因为JS引擎只有一个线程,所以它将会强制异步事件排队执行
-
如果setInterval的回调执行时间长于指定的延迟,setInterval将无间隔的一个接一个执行
-
this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决