Question

我使用此功能调用对象的效果，这些对象在我的页面上多次显示：

setTimeout(function () {

    $(".effect-object").each(function(){
        $(this).addClass("effect");
    });

}, Math.random() * 10000);

现在，效果一直在被解雇＆＃34;随机＆＃34;时间。我希望每个班级的效果都能在自己的随机时间播放。

我尝试这样做，但它没有工作：

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

我该如何做到这一点？

Answer 1

您需要将setTimeout置于each回调

中

$(".effect-object").each(function(_, el) {

  setTimeout(function() {
    $(el).addClass("effect");
  }, Math.random() * 10000));

})

Answer 2

你可以这样使用它：

PS ：我在这里使用了arrow function，因此.each()方法的上下文将在setTimeout函数中使用

$('.effect-object').each(function() {
  setTimeout(() => {
    console.log($(this).html());
  }, Math.random() * 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 1 -->
<div class="effect-object">
  1
</div>

<!-- 2 -->
<div class="effect-object">
  2
</div>

<!-- 3 -->
<div class="effect-object">
  3
</div>

<!-- 4 -->
<div class="effect-object">
  4
</div>

Answer 3

你几乎就在那里，只是在function()

之后错过了.each

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

Answer 4

我现在找到了这个解决方案，这对我来说是最好的。我定义了一个变量＆＃34;＆＃34;为了通过＆＃34;这个＆＃34;内功能。

$(".effect-object").each(function(){

    var that = this;

    setTimeout(function () {

        $(that).addClass("effect");

    }, Math.random() * 10000); 

});

感谢格雷戈里NEUT对箭头功能的建议，这实际上给了我这个想法，并且本来也有可能！

每个类对象的随机超时

4 个答案: