jQuery each函数index未定义报错，求代码问题排查

嗨，我来帮你排查这个问题～

首先看你报错的核心原因：你把index * 500放在了$.each()的第二个参数位置，但这个位置的index根本没在当前作用域定义，而且$.each()的用法也被你搞错了！

原代码的问题点 #

你的代码：

$(document).ready(function() { 
  $(".note-float").each(function(index) { 
    $(this).addClass("note-float-view"); 
  }, index * 500); 
});

• $.each()的正确语法是$(selector).each(function(index, element) { /* 回调逻辑 */ })，它的第二个参数不是延迟时间，如果传第二个参数，是用来指定回调函数内部this的指向的，和定时器完全无关。
• 你写的index * 500在each的外部作用域，这里的index并没有被声明，所以浏览器会抛出index is not defined的错误。
• 另外，你应该是想给每个.note-float元素延迟依次添加类吧？这个逻辑需要在回调内部用setTimeout实现，而不是把延迟时间丢给each方法。

修正后的代码 #

如果你想实现每个元素间隔500ms依次显示（添加note-float-view类），可以这样写：

方案1（ES6+，推荐）

利用let的块级作用域保存当前元素和索引，避免循环变量共享问题：

$(document).ready(function() {
  $(".note-float").each(function(index) {
    // 保存当前元素的引用
    const currentElem = $(this);
    // 按索引计算延迟时间，逐个添加类
    setTimeout(() => {
      currentElem.addClass("note-float-view");
    }, index * 500);
  });
});

方案2（兼容旧浏览器）

用闭包来捕获每个循环的元素和延迟时间：

$(document).ready(function() {
  $(".note-float").each(function(index) {
    // 闭包保存当前元素和延迟值
    (function(elem, delay) {
      setTimeout(function() {
        elem.addClass("note-float-view");
      }, delay);
    }($(this), index * 500));
  });
});

额外说明 #

• 确保你的jQuery已经正确引入，否则也会出现类似的错误（不过你报错是index is not defined，所以主要是上面的逻辑问题）。
• 因为你提到.note-float类已存在且未被隐藏，修正后代码运行时，每个元素会按顺序间隔500ms添加上note-float-view类，实现依次显示的效果。

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