0

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

});​
4

3 に答える 3

3

setInterval関数呼び出しを繰り返すには、ではなく、が必要ですsetTimeout。

構文は同じなので、このトークンを変更するだけです。

しかし、この場合、あなたはユーザーに嘘をついていて（おそらく許容できる）、animateのようないくつかの既存のjquery関数の仕事をしています。

于 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 );

ロードが完了するとorを使用できるようになるためにvar sorを使用していることに注意してください。var intclearTimeoutclearInterval

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 に答える