0

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

而且我正在尝试将它显示的负载百分比每 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);

});​
4

3 回答 3

3

要重复函数调用，您需要setInterval，而不是setTimeout。

语法相同，因此您只需更改此标记。

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

于 2012-06-28T08:05:56.627 回答
1

问题是你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，但现在已弃用。所以我们只是命名函数。

ajax 调用的示例：

var s = setTimeout( function tick() {
    $.ajax( {
        url: '',
        success: function( data ) {
            // Sup with the datas?
            s = setTimeout( tick, 1000 );
        }
    } );
}, 1000 );
于 2012-06-28T08:16:57.337 回答
0

如果您使用的是 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); 
});​
于 2012-06-28T08:22:52.187 回答