setTimeout(function(){},0)

2019-01-22  本文已影响0人  李亚_45be

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

上一篇下一篇

猜你喜欢

热点阅读