jQuery中的SetInterval与.each()函数的使用

Question

我想要遍历一组div并在随机时间执行一些随机操作。我尝试使用以下函数，但是console.log在每次迭代时都返回相同的对象和整数。应该如何正确执行以下操作？

    $('.cloud').each(function() {
    $cloud = $(this);
    ranNum = Math.floor(Math.random() * 5000);
    setInterval(function() {
        setTimeout("console.log($cloud + ranNum)", ranNum)
    })
})          

- jeffreynolte

---

为什么要使用setInterval？你甚至没有指定超时时间！ - ThiefMaster

Answer 1

使用var关键字来使用本地（闭包）变量

因为你正在提供作为字符串的功能，所以必须使用全局变量。你应该编写代码，将本地变量定义在事件匿名函数闭包内，像这样：

$('.cloud').each(function() {
    var $cloud = $(this);
    var ranNum = Math.floor(Math.random() * 5000);
    setInterval(function() {
        // $cloud won't have any particular meaning though
        console.log($cloud + ranNum);
    }, ranNum);
});

setInterval和setTimeout的不寻常组合

我不明白为什么要同时使用interval和timeout？建议只使用其中一个。如果需要重复执行某个操作，可以考虑使用interval。

- Robert Koritnik

---

这个方法有效了。我最初将它们声明为全局变量，但在问题中没有提到。谢谢！ - jeffreynolte

Answer 2

请注意，永远不要将字符串作为 setInterval/setTimeout 的第一个参数。

$('.cloud').each(function () {
    var $cloud = $(this);
    var ranNum = Math.floor(Math.random() * 5000);
    setTimeout(function () {
        console.log($cloud, ranNum);
    }, ranNum);
});

- ThiefMaster

Answer 3

你的函数有几个问题，所以我会重写并解释：

$('.cloud').each(function(i,d) {
    var cloud = $(this);
    var randNum = Math.floor(Math.random() * 5000);

    setTimeout(function(){
        console.log(cloud + ranNum)
    }, randNum );
});

我不明白为什么你要输出cloud变量，因为这只会显示HTMLElement或类似的内容。此外，你试图在间隔内放置一个计时器，两者是相同的，但间隔将保持循环，计时器将只输出一次。

如果你想输出你正在引用的云的编号，请使用i而不是cloud。

尝试更清晰地定义你的变量，这不是PHP，避免使用$，不要忘记var进行初始定义和;结束语句！

希望这有所帮助。

- arkinEx

---

在jQuery中以 $ 为前缀来命名对象是比较常见的，这样做也是完全有效的。然而，我只会在 var $this = $(this) 这种情况下这么做，并不会对其他 jQuery 对象添加 $ 前缀。 - ThiefMaster

@ThiefMaster：对于$this来说是完全有效的，但其他所有东西都会分散注意力，因为你开始在任何地方看到jQuery选择器。 - Robert Koritnik

我认为有理由使用$。尽管它本质上是匈牙利语，但jQuery引入了一个代表一个或多个DOM元素的对象，并且许多函数可以接受DOM元素或jQuery对象。很容易混淆你正在处理DOM元素还是jQuery对象，因为它们有时（但并不总是）可以互换，并且你经常在它们之间来回转换。这种约定可以帮助你避免由此产生的错误。 - Jamie Treworgy

Answer 4

这里有很好的答案。我要补充一点，因为您没有声明ranNum，它最终成为全局变量，每次循环迭代都会覆盖先前的值，而不是创建一个新变量。因此，您在日志输出中看到的数字将始终是在循环的最后一次迭代期间生成的任意值。

因此，请始终声明您的变量！

- Jesse Hallett