JS/jQuery 延迟循环以获得期望的结果（延迟（）不起作用）答案

【问题标题】：JS/jQuery delay loop to get desire result (delay() not working)JS/jQuery 延迟循环以获得期望的结果（延迟（）不起作用）
【发布时间】：2010-11-11 17:58:36
【问题描述】：

我正在尝试通过在循环中移动图像的 css“背景位置”来创建加载图标：

$('#LoginButton').click(function () {

    var i = 1, h = 0, top;

    for (i = 0; i <= 12; i++) {
        h = i * 40;
        top = h + 'px';
        $('#ajaxLoading').css('background-position', '0 -' + top).delay(800);
    }

});

这里的问题是它运行得很快，所以我看不到移动背景的“动画”。所以我添加了jquerys delay()，但是：

delay(800) 不起作用，因为 delay() 仅适用于 jquery 动画效果，而 .css() 不是其中之一。

如何延迟这个循环？

【问题讨论】：

您介意在下面评论我的回答吗？

标签： javascript jquery loops delay

【解决方案1】：

我建议使用 jQuery 计时器插件：http://jquery.offput.ca/js/jquery.timers.js

$('#LoginButton').click(function () {
    var times = 13;
    var delay = 300;
    var h = 0, top;
    $(document).everyTime(delay, function(i) {
        top = h + 'px';
        $('#ajaxLoading').css('background-position', '0 -' + top);
        h += 40;
    }, times);
});

如果您不需要任何插件，请使用 setInterva/clearInterval：

$('#LoginButton').click(function () {
    var delay = 300;
    var times = 13;
    var i = 0, h = 0, top;

    doMove = function() {
        top = h + 'px';
        $('#ajaxLoading').css('background-position', '0 -' + top);
        h += 40;

        ++i;
        if( i >= times ) {
            clearInterval( interval ) ;
        }
    }

    var interval = setInterval ( "doMove()", delay );
});

【讨论】：

这太棒了！圣沃兰德，你救了我很多苦头。注意：延迟 var 以毫秒为单位。因此，如果要将其转换为秒，请执行以下操作： var interval = setInterval("doMove()", delay*1000);

【解决方案2】：

您是否考虑过使用 animate() 而不是 css()？我不能 100% 确定我理解您想要完成的工作，所以这有点像在黑暗中拍摄。

http://api.jquery.com/animate/

【讨论】：

我不想制作动画，因为我会看到背景在移动。我希望它“跳跃”，所以我使用 css。
在这种情况下，你需要定义一个函数来改变你上面的元素位置，然后用 setTimeout() 调用它。然后一旦加载完成，在定义的计时器上调用 clearTimeout() 以防止它继续运行。

【解决方案3】：

Chrome、Safari 和 IE3+ 应该支持 background-position-y，所以如果你针对这些特定的浏览器，使用 jquery 你可以在backgroundPositionY 属性上创建一个定时animation() - http://snook.ca/archives/html_and_css/background-position-x-y （在 Firefox 上该效果不起作用）

【讨论】：

【解决方案4】：

您可以使用 setTimeout() 和 clearTimeout() 函数来完成此操作。

IE：

var GLOBAL_i = 0;

function doAnimation() {

    var h = GLOBAL_i * 40;
    var top = h + 'px';
    $('#ajaxLoading').css('background-position', '0 -' + top);

    if (GLOBAL_i < 12) {
        GLOBAL_i++;

        t=setTimeout(doAnimation, 800);
    }
}

$('#LoginButton').click(function () {

    doAnimation()

});

【讨论】：