请教各位teacher有关js的异步问题

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

for(var i = 0;i<btns.length;i++){
var btn = btns[i];
btn.onclick = function(){
alert(0);
}
}

我的解答思路和尝试过的方法

当点击btn触发onclick事件时，for循环已经结束了，此时 i = 3，那么btn = btns[2], 为什么btn会有别的值呢

我想要达到的结果

将var改为let就行了


```html
<body>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>

  <script>
    const btns = document.querySelectorAll('button')
    for (let i = 0; i < btns.length; i++) {
      const btn = btns[i];
      btn.onclick = function() {
        console.log(i);
      }
    }
  </script>
</body>

```

var 改成 let是最简单的。

  <div class="far">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>

还可以使用index属性

  var box = document.getElementsByClassName('box')

  for (let i = 0; i < box.length; i++) {
    console.log(box[i]);
    box[i].index = i
    box[i].onclick = function () {
      console.log(this.index);
    }
  }

还可以使用闭包保护内部数据

  var box = document.getElementsByClassName('box')

  for (var i = 0; i < box.length; i++) {
    (function (i) {
      box[i].onclick = function () {
        console.log(i);
      }

    })(i)
  }