JavaScript异步行为：setTimeout与IIEF执行机制解惑

示例代码 #

var arr = [10, 24, 15, 4];
for (var i = 0; i < arr.length; i++) {
  setTimeout(
    (function (index) {
      return function () {
        console.log("index:" + index + " element: " + arr[index]);
      };
    })(i),
    1000
  );
}

执行输出 #

index:0 element: 10
index:1 element: 24
index:2 element: 15
index:3 element: 4

疑问点 #

我了解JavaScript中异步函数（如setTimeout调度的回调）仅在所有同步代码执行完毕后才运行，原以为for循环会先执行完成，且因var声明的i是函数作用域，回调执行时i应为数组长度4，但实际输出却能正确打印对应索引和元素，甚至将var改为let结果也一致。

想请教：

• 这种情况的原因是什么？
• JavaScript如何处理异步回调与同步for循环的执行关系？
• 为何此处使用var或let无差异？
  希望能得到见解或学习资源。

内容的提问来源于stack exchange，提问作者Murshid Ameen