4

時々インクリメントしたい要素がページにあります。

<p class="count">28</p>

私のJavaScript内には、5秒ごとに1回実行され、サーバーから新しい（より高い）番号を非同期的に取得する間隔があります。これは、カウンターの線に沿っていくらか機能します。

setInterval(function(){
  $.post("getcount.php", function(num){
    latestNum = num;
  });
}, 5000);

非同期リクエストが数値56をプルダウンする場合、段落テキストが28から56に変更され、増分中に多くの（またはほとんどの）中間体が表示されるようにしたいと思います。私が現在行っているのは、段落テキストとローカル変数を常にチェックするための別の間隔を設定することです。段落テキストが変数値よりも小さい場合は、1ずつ増加します。これは0.5秒ごとに行われます。

setInterval(function(){
  currNum = Number( $(".count").text() );
  if (currNum < latestNum)
    $(".count").text( currNum + 1 );
}, 50);

私の質問はこれです：インターバルを絶えず実行せずにこれを行うためのより良い方法はありますか？これは、非同期リクエストの応答から呼び出すことができるアニメーションインクリメントであり、2つの数値が値に達すると停止しますか？また、2つの数値の値が一致する前に、次の要求が行われる可能性があることにも注意してください。

集団はこれをどのように行いますか？

4

4 に答える 4

2

正解：

コメント投稿者へ：自分自身に気づきました...それでもありがとう！

var interval = setInterval(function(){
  currNum = Number( $(".count").text() );
  if (currNum < latestNum) {
    $(".count").text( currNum + 1 );
  } else {
    setTimeOut(function() { clearInterval(interval) }, 0);
  }
}, 50);

これにより、間隔が変数に保存され、clearIntervalが呼び出されて間隔が停止します。setTimeOutが必要です。そうしないと、実行中に間隔がクリアされます。

最初の答え：

2つの関数を組み合わせてみませんか。

setInterval(function(){
  $.post("getcount.php", function(num){
    latestNum = num;
    if (currNum < latestNum) {
        currNum = latestNum;
        $(".count").text( currNum );
    }
  });
}, 5000);

これにより、0.5秒ごとの更新が妨げられます。

于 2010-02-25T16:45:04.377 に答える
1

Obalixの回答に基づいて、5秒の間隔でより短い間隔をトリガーすることをお勧めします。

var interval = null, currNum = null;
setInterval(function(){
  $.post("getcount.php", function(num){
    latestNum = num;
    if (currNum === null)
        currNum = Number( $(".count").text() ); // should only execute once
    if (currNum < latestNum && interval === null)
        interval = setInterval(ObalixFunction, 50);
  });
}, 5000);

変更します

function ObalixFunction() {
    if (currNum < latestNum) {
        // increment the currNum variable too so we don't have to keep parsing it
        $(".count").text( ++currNum ); 
    } else {
        setTimeOut(function() { clearInterval(interval); interval = null; }, 0);
    }
}
于 2010-02-25T17:21:12.307 に答える
1

これが私の答えです-実際には2つの答えです。
一定の間隔で目標値に向かって直線的にステップすると、そこに到達しないリスクがあります。
そこで、毎回差を半分にし、大きな差があってもはるかに速く到達する別のソリューションも提供しました。
どちらの例もカウントダウンできます。

$( function() {

    var tRef,
        counter = $( '#counter' );
        target  = $( '#target' );

    /*
     * A function that eases towards its target
     */
    function convergeEasing( target ) {
        clearTimeout( tRef );
        target = parseInt( target );
        var current = parseInt( counter.html() );
        var diff = target - current;
        if( diff ) {
            var rounder = diff > 0 ? Math.ceil : Math.floor;
            current += rounder( diff/2 );
            counter.html( current );
            tRef = setTimeout( function() {
                convergeEasing( target );
            }, 250 );
        }
    }

    /*
     * A function that plods towards its target
     */
    function convergeLinear( target ) {
        clearTimeout( tRef );
        target = parseInt( target );
        var current = parseInt( counter.html() );
        var diff = target - current;
        if( diff ) {
            current += diff > 0 ? 1 : -1;
            counter.html( current );
            tRef = setTimeout( function() {
                convergeLinear( target );
            }, 250 );
        }
    }

    /*
     * I've mocked your ajax request up here for demo purposes
     * using the linear way as per your question
     */
    setInterval( function(){
        var n = Math.round( Math.random()*1000 );
        target.html( n );
        convergeLinear( n );
    }, 5000 );

});

<div id="target">20</div>
<div id="counter">20</div>

イージング戦略は、コードの多くを複製する2つの関数ではなく、渡される関数である可能性があると思います。

于 2010-02-25T20:46:09.890 に答える
0

結果を受け取ったときに2番目の間隔を生成し、目標値に達したときにそれを終了します。

于 2010-02-25T16:50:29.250 に答える