Question

情景：

我想创建一个jQuery可控大奖“微调器”，它将快速排序通过div之前的一些随机图像，然后安置一个，每个之间的延迟间隔相等但可更改。出于模型的目的，我只是将CSS颜色类更改为一个框，尽管在最后我将使用背景图像。

我认为这对循环来说是个明智的选择。我确信有一种更有效的方法可以做到这一点，但猜测下面的方法可以正常工作。但是，我发现我无法控制CSS颜色交换速度。这会瞬间改变颜色类，只显示最后一个。我想要的是指示的延迟。

jQuery delay（）在使用addClass（）链接时似乎不起作用，尽管它可以很好地处理效果。所以我尝试使用window.setTimeout，但据我所知，在这种情况下，它需要一个kludgey函数调用。下面编写的代码在循环运行后执行所有函数调用。这是一个关闭问题吗？不想使用setInterval，因为这些将是有限的迭代。

感谢您的任何建议！

for (var j= 9; j >= 0; j--) {
    $('#box1').attr('class', 'boxes');   // strips all current classes, replaces them with class 'boxes', which has general CSS characteristics
    var numRand = Math.floor(Math.random() * 6); 
    var randomClass = colorArray1[numRand];  //  pull random class from an array of six choices
    $('#box1').addClass(randomClass);

    // Everything above here works fine, would like loop delay here
    // Tried using straight-up setTimeout -- doesn't appear to like loops
    window.setTimeout(outerFunc, 1000);  
};

function outerFunc() {
    alert('nobody here but us chickens!'); 
};

Answer 1

如果您希望.delay()使用.addClass()等方法，可以使用jQuery's .queue() method将其添加到队列中。

$('#box1').delay(1000)
          .queue(function( nxt ) { 
               $(this).addClass(randomClass); 
               nxt(); // allow the queue to continue
          });

否则，如果我得到您想要的内容，您可以将1000的{{1}}毫秒乘以setTimeout()的当前值，以便每次持续时间增加。

Answer 2

setTimeout和setInterval在javascript中的工作方式与您希望使用它们的方式不同。

这两个函数都接受您传入的函数并将它们附加到window DOM对象。然后，在传入的延迟已经过去之后，当没有其他脚本当前正在运行时，它们将从window对象调用。

要获得您所需的功能，您需要转换代码，以便jQuery addclass调用在您传递给setTimeout的函数内。

Answer 3

也许递归会起作用？

// this code is not tested
var j = 9;
function myFunc() {
    // code here
    j--;
    if(j >= 0) setInterval(myFunc, 1000);
}

我自己没有在jQuery中使用队列类（首先我听说过它，但听起来很酷）。这可能是更好的答案，但如果队列不能按预期工作，这应该是一个不错的选择。

更新：我刚刚注意到你的代码中看起来好像你希望setTimeout像.Net中的Thread.Sleep一样工作。 setTimeout不起作用。它的工作方式更像Thread.Start，一旦调用它，代码就会继续运行。

jQuery延迟与setTimeout的累积奖金“旋转器”图像交换

3 个答案: