setTimeout(function(){},0)
for( i=0; i<3; i++){
setTimeout(function(){
console.log(i)
},10)
console.log(i)
}
打印结果是:0 1 2 3 3 3
很多公司面试都爱出这道题,此题考察了异步、作用域、闭包知识点。
setTimeout是异步的,正确的理解setTimeout的方式(注册事件): 有两个参数,第一个参数是函数,第二参数是时间值。 调用setTimeout时,把函数参数,放到事件队列中,等主程序运行完,再调用。
要点一:
var timeoutId = scope.setTimeout(function[, delay, param1, param2....]);
var timeoutId = scope.setTimeout(function[, delay]);
var timeoutId = scope.setTimeout(code[, delay]);
setTimeout第一个参数可以是一个函数,也可以是一个包含Javascript代码的字符串(可以类比eval()中使用字符串)
setTimeout第一个参数可以是一个函数,也可以是一个包含Javascript代码的字符串(可以类比eval()中使用字符串)
//方式1:一般的书写方式
setTimeout(function(){
console.log(a)
},1000)
//方式2:也可以使用字符串
setTimeout("console.log(a)",1000);
不过,不推荐方式2,不论是代码可读性,还是MDN的官方解释-安全原因,亦或是在旧版浏览器中的性能原因~~。
要点二:
Javascript是一个单线程的解释器,因此一段时间只能执行一段代码,所以会有Javascript任务队列,这些任务会按照它们队列的顺序执行。而setTimeout的第二个参数-delay告诉Javascript再过多久把当前任务添加到队列中。
如果省略该参数,delay取默认值0。实际的延迟时间可能会比 delay 值长【通常是由于函数嵌套导致(嵌套层级达到一定深度),或者是由于已经执行的setInterval的回调函数阻塞导致】。
根据HTML5 spec 中精确的数值,delay延迟时间大于等于4ms,即便你把delay设为0
要点三:
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都是在全局作用域下执行的,因此函数中的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
})
参考:https://blog.csdn.net/qq_35087256/article/details/80489891