关于setTimeout的面试题

简介:   于地铁上看了一篇帖子,关于setTimeout的面试题,觉得见得多,记录,以学习之。  我们都知道,这样的一个例子:for ( var i = 0;i { setTimeout(resolve, timeountMS);}); (async () => { // 声明即执行的 as...

  于地铁上看了一篇帖子,关于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

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

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(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 

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

var tasks = []; // 这里存放异步操作的 Promise
var 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));
}

  

 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);
})();

 

  

每日一句:The solace of life is that each day has an end. This one will, too.

翻译:人生值得欣慰之处便是,每一天都有结束的时候。今天亦不例外。——《星星上的人》

 

目录
相关文章
|
3月前
|
JavaScript
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
JS【详解】setTimeout 延时(含清除 setTimeout,计时开始时间,0 秒延时解析,多 setTimeout 执行顺序,setTimeout 应用场景,网红面试题)
672 0
|
Web App开发
六、setTimeout与循环闭包经典面试题详解
值得高兴的是,很多朋友在阅读了我的文章之后确实对闭包有了更加深刻的了解,并准确的给出了好几种写法。大家能够认真的阅读我的文章并且一个例子一个例子的上手练习,这种认可对我而言真的非常感动。 但是也有一些基础稍差的朋友在阅读了之后,对于这题的理解仍然感到困惑,因此应一些读者老爷的要求,借此文章专门对setTimeout进行一个相关的知识分享,希望大家读完之后都能够有新的收获。
297 0
六、setTimeout与循环闭包经典面试题详解
|
2月前
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
|
14天前
|
算法 Java 数据中心
探讨面试常见问题雪花算法、时钟回拨问题,java中优雅的实现方式
【10月更文挑战第2天】在大数据量系统中,分布式ID生成是一个关键问题。为了保证在分布式环境下生成的ID唯一、有序且高效,业界提出了多种解决方案,其中雪花算法(Snowflake Algorithm)是一种广泛应用的分布式ID生成算法。本文将详细介绍雪花算法的原理、实现及其处理时钟回拨问题的方法,并提供Java代码示例。
36 2
|
18天前
|
JSON 安全 前端开发
第二次面试总结 - 宏汉科技 - Java后端开发
本文是作者对宏汉科技Java后端开发岗位的第二次面试总结,面试结果不理想,主要原因是Java基础知识掌握不牢固,文章详细列出了面试中被问到的技术问题及答案,包括字符串相关函数、抽象类与接口的区别、Java创建线程池的方式、回调函数、函数式接口、反射以及Java中的集合等。
21 0
|
2月前
|
Java C++
【Java基础面试十七】、Java为什么是单继承,为什么不能多继承?
这篇文章讨论了Java单继承的设计原因,指出Java不支持多继承主要是为了避免方法名冲突等混淆问题,尽管Java类不能直接继承多个父类,但可以通过接口和继承链实现类似多继承的效果。
【Java基础面试十七】、Java为什么是单继承,为什么不能多继承?
|
2月前
|
XML 存储 JSON
【IO面试题 六】、 除了Java自带的序列化之外,你还了解哪些序列化工具?
除了Java自带的序列化,常见的序列化工具还包括JSON(如jackson、gson、fastjson)、Protobuf、Thrift和Avro,各具特点,适用于不同的应用场景和性能需求。
|
2月前
|
Java
【Java基础面试三十七】、说一说Java的异常机制
这篇文章介绍了Java异常机制的三个主要方面:异常处理(使用try、catch、finally语句)、抛出异常(使用throw和throws关键字)、以及异常跟踪栈(异常传播和程序终止时的栈信息输出)。
|
2月前
|
Java
【Java基础面试三十八】、请介绍Java的异常接口
这篇文章介绍了Java的异常体系结构,主要讲述了Throwable作为异常的顶层父类,以及其子类Error和Exception的区别和处理方式。
|
2月前
|
Java
【Java基础面试十六】、Java中的多态是怎么实现的?
这篇文章解释了Java中多态的实现机制,主要是通过继承,允许将子类实例赋给父类引用,并在运行时表现出子类的行为特征,实现这一过程通常涉及普通类、抽象类或接口的使用。