关于setTimeout的面试题

小编 2026-06-11 阅读:525 评论:0

　　于地铁上看了一篇帖子，关于setTimeout的面试题，觉得见得多，记录，以学习之。　　我们...

　　于地铁上看了一篇帖子，关于setTimeout的面试题，觉得见得多，记录，以学习之。

　　我们都知道，这样的一个例子：

for ( var i = 0;i<5; i++) {    console.log(i);

结果不用说，直接输出为0,1,2,3,4；

for( var i = 0;i<5;i++) {    setTimeout(function() {        console.log(i);    },1000)}//5,5,5,5,5

这个可能不熟悉的人不怎么会知道，这个setTimout在for里面是异步执行的，在延迟输出的时候，i的值已经是5了，因此会输出 5,5,5,5,5

这个题目背后的意义在于，每隔一秒输出i,该怎么改呢？看下面：

for( var i = 0;i<5;i++) {    (function(i){        setTimeout(function () {            console.log(i);        },1000)    })(i);}

嗯，得采用闭包的方法，将里面的i值保存下来；结果就是 01234

但是如果这样改呢？

for( var i = 0;i<5;i++) {    (function(){        setTimeout(function () {            console.log(i);        },100)    })(i);}

我们想想，虽然有点像闭包的样子了，但是我们需要的i的值依旧没有传进即时函数，没有保持对i的引用，依旧会将i的值加到5,输出也就是，5,5,5,5,5 。往下看

for (var i = 0; i < 5; i++) {      setTimeout((function(i) {          console.log(i);      })(i),1000)}

这一段代码呢就是往，setTimeout里面传入一个即时函数，传入i，即时函数会输出01234的，这里的效果就是不会等待1s 了，会立即输出01234

但是在浏览器中会出现这么一个数字或者字符串是啥意思呢？这是是因为定时器的执行后会返回一个ID ，这个数字就是定时器的ID

关于setTimeout的面试题

上面用闭包的方式新手可能看不太明白，换上下面的这个；

var output = function (i) { setTimeout(function() {  console.log(new Date, i); }, 1000);}; for (var i = 0; i < 5; i++) { output(i); // 这里传过去的 i 值被复制了} console.log(new Date, i);

　　关于setTimeout的面试题

来来，有点蒙了，小编再上最后一点代码：

setTimeout(function() {  console.log(1)}, 0);new Promise(function executor(resolve) {  console.log(2);  for( var i=0 ; i<10000 ; i++ ) {    i == 9999 && resolve();  }  console.log(3);}).then(function() {  console.log(4);});console.log(5);

　　Promise 的规则很简单，就是先执行完 then 前面的函数，然后在执行then的函数，这个主要是针对回调函数的麻烦，在执行for的函数是异步的，因此先输出3

关于setTimeout的面试题

下面这个promise 更好看：每隔一秒打印出来

var tasks = []; // 这里存放异步操作的 Promisevar output = (i) => new Promise((resolve) => { setTimeout(() => {  console.log(new Date, i);  resolve(); }, 1000 * i);}); // 生成全部的异步操作for (var i = 0; i < 5; i++) { tasks.push(output(i));}

　　关于setTimeout的面试题

3.7 追加代码笔记：es7的异步处理模式

// 模拟其他语言中的 sleep，实际上可以是任何异步操作const sleep = (timeountMS) => new Promise((resolve) => { setTimeout(resolve, timeountMS);}); (async () => { // 声明即执行的 async 函数表达式 for (var i = 0; i < 5; i++) {  await sleep(1000);  console.log(new Date, i); }  await sleep(1000); console.log(new Date, i);})();

关于setTimeout的面试题