setTimeout()中容易忽视的要点

1,618 阅读2分钟

setTimeout语法:

var timeoutId = scope.setTimeout(function[, delay, param1, param2....]); 
var timeoutId = scope.setTimeout(function[, delay]); 
var timeoutId = scope.setTimeout(code[, delay]);

setTimeout要点一:

setTimeout第一个参数可以是一个函数,也可以是一个包含Javascript代码的字符串(可以类比eval()中使用字符串)

//方式1:一般的书写方式
setTimeout(function(){
	console.log(a)
},1000)

//方式2:也可以使用字符串
setTimeout("console.log(a)",1000);

不过,不推荐方式2,不论是代码可读性,还是MDN的官方解释-安全原因,亦或是在旧版浏览器中的性能原因~~。


setTimeout要点二:

Javascript是一个单线程的解释器,因此一段时间只能执行一段代码,所以会有Javascript任务队列,这些任务会按照它们队列的顺序执行。而setTimeout的第二个参数-delay告诉Javascript再过多久把当前任务添加到队列中。

如果省略该参数,delay取默认值0。实际的延迟时间可能会比 delay 值长【通常是由于函数嵌套导致(嵌套层级达到一定深度),或者是由于已经执行的setInterval的回调函数阻塞导致】。

根据HTML5 spec 中精确的数值,delay延迟时间大于等于4ms,即便你把delay设为0


setTimeout要点三:

setTimeout可选参数:附加参数,一旦定时器执行,它们会作为参数传递给function 或 执行字符串(setTimeout参数中的code)。

setTimeout(function(param1,param2){
	console.log(param1)   //a
	console.log(param2)   //b
},1000,'a','b')
function timeout(ms) {
	return new Promise((resolve, reject) => {
		setTimeout(resolve, ms, 'finish');
	});
}

timeout(100).then((value) => {
	console.log(value);		//finish
});

setTimeout要点四:

setTimeout都是在全局作用域下执行的,因此函数中的this都是指向window对象(一般情况下,排除使用ES6中的箭头函数、Function.prototype.bind()、闭包重写作用链对象。。。。等等更改作用域的其他方式)

var obj = {
	timer:function(){
		setTimeout(function(){
			console.log(this == window)     //true
		})
	}
}
obj.timer()

虽然有不少的书上/文档中写着,严格模式下,this是undefined.

BUT,在严格模式下,setTimeout( )的回调函数里面的this仍然默认指向window对象, 并不是undefined

"use strict";
setTimeout(function(){
	console.log(this == window)    //true
})