经典闭包题目ES7新解

港控/mmm° 2022-02-09 08:11 205阅读 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 条评论，205人围观）

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

相关阅读

相关 JavaScript闭包面试经典案例

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

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

相关 js闭包经典问题的理解

文章目录 JS闭包的作用错误示例引用和复制举例说明作用域闭包 -------------------- JS闭包

迷南。/ 2022年10月19日 15:59/ 0 赞/ 113 阅读

相关离散题目16——自反闭包

think: 1二维矩阵+自反闭包定义 [什么是自反闭包 —— 百度百科][Link 1] [sdut题目链接][sdut] 离散题目16 Time Limit

分手后的思念是犯贱/ 2022年06月18日 10:19/ 0 赞/ 159 阅读

相关闭包经典面试题

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

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

相关 javascript闭包经典面试题

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

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

相关 Javascript闭包由浅入深题目

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

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

相关闭包经典问题

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

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

相关经典闭包题目ES7新解

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

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

相关 JavaScript之经典闭包问题

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

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

相关 js经典闭包题

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

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