Question

我有这个使用CSS创建的AJAX加载器。

我试图将每1秒显示的％加载量增加10％，以便用户可以看到一些进展。

我使用这个setTimeout函数每1秒调用一次。

这是函数和Fiddle：

$(document).ready(function() {

    var increase = 10;
    setTimeout(function() {
        increase = increase + 10;
        $("#result").html("<div class='progress progress-striped active' style='width :300px; margin:0 auto;'><div class='bar' style='width: " + increase + "%;'></div></div>");
        if (increase == 100) {
            increase = 10;                
        }

    }, 1000);

});

Answer 1

要重复功能调用，您需要setInterval，而不是setTimeout。

语法相同，因此您只需更改此令牌即可。

但是在这种情况下，你对用户撒谎（可能是可以接受的）并且你正在做一些现有的jquery函数，比如animate。

Answer 2

问题是你只调用setTimeout一次。这很酷，但它只会被调用一次。

通常，当您想每隔多次调用一次函数时，可以使用setInterval：

var int = setInterval( function() {
    // do something
}, 1000 );

但是，setInterval将每秒运行一次，即使其中的函数需要2秒才能运行（您可以看到重叠问题？）。

这就是为什么你可以使用setTimeout：

使用以下技巧

// Note that I'm naming the function in the setTimeout
var s = setTimeout( function tick() {
    // do something that takes a long time, like an ajax call

    // And finally:
    s = setTimeout( tick, 1000 );
}, 1000 );

请注意，我在使用var s或var int时可以在加载完成后使用clearTimeout或clearInterval。

此外，使用arguments.callee来回忆同一个函数是一个聪明的伎俩，但它是now deprecated。所以我们只是命名函数。

ajax调用的示例：

var s = setTimeout( function tick() {
    $.ajax( {
        url: '',
        success: function( data ) {
            // Sup with the datas?
            s = setTimeout( tick, 1000 );
        }
    } );
}, 1000 );

Answer 3

如果您使用的是jQuery，为什么不使用animate();。它有一个原因。它提供流畅，简单的语法。

此外，您要将整个标记一次又一次地添加到div#result。应该避免。

试试这个，

<强> CSS：

#result > .progress{
  width :300px; 
  margin:0 auto; 
}

<强>使用Javascript：

$(document).ready(function() {
   $('#result').html("<div class='progress progress-striped active'><div class='bar'></div></div>");
   $('#result').find('.bar').animate({width:'100%'}, 1000); 
});

动态增加AJAX加载器的％加载量

3 个答案: