直接上代码 

function show() {
        for (var i = 0; i < div.length; i++) {
            $(".dian div").eq(i).removeClass("show");
            setTimeout(function () {
                $(".dian div").eq(i).addClass("show");
            }, 300)
            div.eq(i).css("animation-delay", `${0.1 * i}s`);
        }
    }

这是部分实现js加载动画的代码

我在for循环内用var 定义了一个i

实现给class = dian 下所有的div 添加 和 删除类名show

但是在实际运行当中实现删除类名的功能 添加并不能实现

我在setTimeout中打印了i 发现结果是所有的打印结果都是i最后的值 并没有想象的那样打印0 1 2···

当我用let在for循环中定义i时 setTimeout 便可以从0开始获取

let非常适合用于 for循环内部的块级作用域。JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域，用let声明的变量传入到 for循环体的作用域后，不会发生改变，不受外界的影响。看一个常见的面试题目：

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
    console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
  }, 0);
}
// 输出结果
10   共10个
// 这里面的知识点： JS的事件循环机制，setTimeout的机制等

如果把 var改成 let声明：

// i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //  i 是循环体内局部作用域，不受外界影响。
  }, 0);
}
// 输出结果：
0  1  2  3  4  5  6  7  8 9
最后修改：2022 年 11 月 29 日
© 来自互联网
如果觉得我的文章对你有用，请随意赞赏