经典闭包题目ES7新解

港控/mmm° 2022-02-09 08:11 290阅读 0赞

# 题目 #

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

输出：5 （1s）5 5 5 5 5

如何变成： 5（1s）0（1s）1（1s）2（1s）3（1s）4

# 经典解法 #

## 闭包 ##

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

## ES6: let ##

for (let i = 0; i < 5; i++) {
        setTimeout(function() {
            console.log(new Date, i)
        }, i * 1000)
    }
    let i = 5
    console.log(new Date, i)

# 追问 #

如何变成： 0（1s）1（1s）2（1s）3（1s）4 （1s）5

# 新解法 #

## ES6: Promise ##

const tasks = []
    
    const getPromise = i => 
      new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(new Date, i)
          resolve(i)
        }, i * 1000)
      })
    
    
    for (let i = 0; i < 5; i++) {
      tasks.push(getPromise(i))
    }
    
    Promise.all(tasks).then(iArr => {
      setTimeout(() => {
        const i = [...iArr].pop() + 1
        console.log(new Date, i)
      }, 1000)
    })

## ES7: async/await ##

const sleep = time => new Promise(resolve => setTimeout(resolve, time)); // 这个分号不能省
    
    (async () => {
    	for (var i = 0; i < 5; i++) {
    		console.log(new Date, i)
    		await sleep(1000)
    	}
    	console.log(new Date, i)
    })()

**注**

1 句尾分号不能省略的情况：

*  下一行是 IFFE 的
 *  下一行是数组字面量的

2 套路：new 一个为决议的 Promise, 其构造函数内使用定时器，定时器内 reslove

3 取一个数组最末尾的元素

*  `arr[arr.length - 1]`
 *  `[...arr].pop()`
 *  `arr.slice(-1)[0]`

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关经典js闭包题

下面是自己积累的几道经典JS闭包题每一道都很有代表性，可能有的题解释的不到位，大家可以参考着结果先自己想一想，如果能够把这几道闭包题搞清楚，那么你在函数闭包上的成长一

- 日理万妓/ 2023年06月29日 02:20/ 0 赞/ 18 阅读

相关面试题目----关于JS闭包的题目

1、 function fun(n,o) { console.log(o) return { fun:function(m

小鱼儿/ 2023年02月27日 05:52/ 0 赞/ 21 阅读

相关 JavaScript闭包面试经典案例

案例一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2022年12月12日 13:41/ 0 赞/ 164 阅读

相关闭包经典面试题

闭包应该是前段面试中经常碰到的面试题，很多人都会在这个问题上被问住。如果想要弄清楚就要掌握闭包的概念；首先看面试题： for (var i = 1; i <= 5; i+

￡神魔★判官ぃ/ 2022年06月17日 02:54/ 0 赞/ 435 阅读

相关 javascript闭包经典面试题

> > function fun(n,o) \{ > > > console.log(o) > > > return \{ > > >

怼烎@/ 2022年06月13日 06:30/ 0 赞/ 242 阅读

相关 Javascript闭包由浅入深题目

闭包就是能够读取其他函数内部变量的函数两个最大用处一个是前面提到的可以读取函数内部的变量；一个就是让这些变量的值始终保持在内存中。 1、变量作用域要理解

悠悠/ 2022年05月25日 02:45/ 0 赞/ 126 阅读

相关闭包经典问题

function test()\{ var arr = \[\]; for(var i = 0; i <

客官°小女子只卖身不卖艺/ 2022年03月16日 11:44/ 0 赞/ 217 阅读

相关经典闭包题目ES7新解

题目 for (var i = 0; i < 5; i++) { setTimeout(function() { cons

港控/mmm°/ 2022年02月09日 08:11/ 0 赞/ 291 阅读

相关 JavaScript之经典闭包问题

闭包 > 返回函数不要引用任何循环变量，或者后续会发生变化的变量。 > =. = > 如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变

逃离我推掉我的手/ 2022年01月06日 01:33/ 0 赞/ 265 阅读

相关 js经典闭包题

面试官：会闭包么？ you：木问题！！！面试官：那么做做下面的题吧？ you：。。。（一脸懵逼中...） //经典闭包 functio

妖狐艹你老母/ 2021年09月18日 02:42/ 0 赞/ 348 阅读