异步问题 => 循环绑定事件

前言：

　　浏览器是多线程的

　　js 是单线程

• js 中所有的事件绑定都是异步编程（绑定的时候并没有执行）
• 同步：js 中当前这个任务没有完成，下面的任务都不会执行，只有当前任务彻底完成才会执行下面的任务
• 异步：js 中当前任务没有完成，需要等一会在完成，此时我们可以继续执行下面的任务

---

 

（一）demo 代码

　　此代码的我们想要的预期是 点击不同的弹出不同的结果

　　但是此代码运行结果为五个按钮都是一样的结果

<div id = "btnBox">
    <input type = "button" value = "button_1"></input>
    <input type = "button" value = "button_2"></input>
    <input type = "button" value = "button_3"></input>
    <input type = "button" value = "button_4"></input>
    <input type = "button" value = "button_5"></input>
</div>

<script type="text/javascript">

    var btnBox = document.getElementById('btnBox');

    var input = btnBox.getElementsByTagName('input')

    for(var i = 0 ; i < 5 ; i++){
        input[i].onclick = () => {
            alert(i)
        }
    }
</script>

运行结果 五个按钮弹出的都一样

 

 

 

---

 

（二）解决方法

　　1　let 块级作用域 解决

         

　　2 闭包解决

         

 

         

 

 

---

 

（三） 匿名函数自执行的写法

• a = function(){}()
• ~function(){}()                         //个人喜好的方式
• !function(){}()
• +function(){}()
• void function(){}()
• 当然如果你不喜欢以上方式

　　　　(function(){})()
　　　　也是可行的

 

---

 

 

 

　　　　坚持或亦如此