javascript - JS/jQuery 延迟循环以获得期望的结果(延迟()不工作)

Question

我正在尝试通过循环移动图像的 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() 不是其中之一。

如何延迟这个循环？

Answer 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 );
});