2019-05-13 es6 let解决异步事件的原理

作者: DreamNeverDie | 来源:发表于2019-05-13 15:27 被阅读0次

2019-05-13 es6 let解决异步事件的原理
深入理解ES6 ---- let const
对于ES6 promise和ES7 async、await的理解
ES6——promise(一) 学习笔记
【ES6】let
Promise介绍及jQuery deferred详解
Promise
Promise
ES6 Promise
2020-03-14 vue-promise一些简单记录

es6 let 与var相比区别是，let在每一个for的每一个循环下都创建一个独立的i,如下列

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
            window.onload=function(){
                var aBtn=document.getElementsByTagName('input')
                 for(let i=0;i<aBtn.length;i++){
                    aBtn[i].onclick=function(){
                        alert(i)
                    }            
            }
            
    </script>
<input type="button"  value="a"/>
<input type="button"  value="b"/>
<input type="button"  value="c"/>
</body>
</html>

等价于如下，这里使用了包装函数，就可以让每次循环都有一个独立的i

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
            window.onload=function(){
                var aBtn=document.getElementsByTagName('input')

                for(var i=0;i<aBtn.length;i++){
                    (function(i){
                        aBtn[i].onclick=function(){
                        alert(i)
                    }
                    })(i)
                }
            }
            
    </script>
<input type="button"  value="a"/>
<input type="button"  value="b"/>
<input type="button"  value="c"/>
</body>
</html>