如何为每个.effect-object元素设置独立随机延迟的addClass效果？

嘿，我来帮你搞定这个问题！你想让每个.effect-object元素在各自独立的随机时间触发效果，但之前的写法没生效，咱们来拆解下问题和解决方案：

为什么你的尝试没生效？ #

你写的这段代码：

$(".effect-object").each( setTimeout( function(){ $(this).addClass("effect"); }, Math.random() * 10000));

核心问题出在each()的参数上——jQuery的each()需要接收一个回调函数来遍历处理每个元素，但你直接传入了setTimeout()的返回值（一个数字类型的定时器ID），这完全不符合each()的使用规则，代码自然没法按预期执行。

正确的实现方式 #

你需要在each()的回调函数内部，为每个元素单独创建定时器，这样每个元素就能拥有自己的随机延迟了。这里有两种实用写法：

写法1：使用箭头函数（自动保留当前元素上下文）

$(".effect-object").each(function() {
  // 这里的this指向当前遍历到的.effect-object元素
  setTimeout(() => {
    $(this).addClass("effect");
  }, Math.random() * 10000);
});

写法2：提前保存当前元素（兼容旧浏览器）

如果你的项目需要兼容不支持箭头函数的旧环境，可以先把当前元素存起来：

$(".effect-object").each(function() {
  const $currentElement = $(this);
  setTimeout(function() {
    $currentElement.addClass("effect");
  }, Math.random() * 10000);
});

效果说明 #

这两种写法都会让每个.effect-object元素在0到10秒（Math.random() * 10000）之间的随机时间，单独触发添加effect类的操作，不会再出现所有元素同步生效的情况。

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