JQueryを使用したアニメーション数（半カウントダウン）？

Question

JQueryを使用して、5000などの数値を別の値（4000など）にすばやく変更しようとしています。今、私はこれを使用してこれをうまく行います：

mod(".class",4000,"add");

function mod(id,value,type){
    var numb = $(id).html();
    var current_value = parseInt(numb);
    do {
        if(type == "add")
            increment(id);
        else
            decrement(id);
        current_value = parseInt(numb);
    }while(current_value != value);

    function decrement(id){
        $(id).html(current_value-1);
    }

    function increment(id){
        $(id).html(current_value+1);
    }
}

おそらくそれが最善の方法ではないことを知っていますが、それを行うために必要なのは、現在の値から設定値に非常に迅速にカウントダウン（またはアップ）することです。このメソッドで意図したことは、setIntervalまたはsetTimeoutを使用して遅延を設定することでしたが、スクリプト全体がかなりひどく失敗します。

どんなアドバイスも歓迎しますが、この一見単純なタスクには大きなプラグインを使用したくないと思います。

Answer 1

あなたが提供したコードを実行すると、無限ループに陥りました。 doループの最後に、

があります

current_value = parseInt（numb）;

しかし、numbの値は関数の先頭でのみ設定されるため、永遠に続きます。それを

に変更した場合

current_value = parseInt（$（id）.html（））;

その後、正常に動作します。即座に発生するように見えることを除いて。

タイムアウトを使用してアニメーションを実現する方法をハックしましたが、これはかなりうまくいくようですが、javascriptにはまだかなり新しいので、より効率的なアプローチがあるかどうかはわかりません。 setTimeoutに渡される2番目のパラメーターを調整して、目的の速度を取得します。また、増分/減分値を変更する場合は、 dir の減速度を変更します。

function mod2(id, value) {
    var numb = $(id).html();
    var current_value = parseInt(numb);

    // determine direction to go
    var dir = 1;
    if (current_value - value > 0) {
        dir *= -1;
    }
    getThere(id, current_value, value, dir);
}

function getThere(id, current_value, target_value, dir) {
    current_value += dir;
    $(id).html(current_value);
    if (current_value != target_value) {
        setTimeout("getThere('"+id+"',"+current_value+","+target_value+","+dir+")", 10);
    }
}

Answer 2

ここで行っているのは、DOMを何回も続けて更新することです。その結果、ブラウザは、すべての変更が完了するまで待機し、その後のみページを再描画します。そのため、数値が4000に達するまで視覚的な変化は見られません。

はい、 setTimeout または setInterval / clearInterval を使用する必要があります。または、コードを明確にするために、 jQuery＆quot; wait＆quot;を使用できます。プラグイン：

// (code to get new value goes here)

$('.class').wait(100, function(){
    $(this).text(newValue);
});

html（）の代わりに、 text（）を使用しました。HTML構造を変更する必要がないように見えるためです。

Answer 3

setTimeoutを使用したthornのアプローチが好きですが、カウンタを更新する前にページがロードされるように、ウィンドウのロード後に2つの関数に凝縮して開始します。

var counterTimeout = 10; // time between increments in ms
$(window).load(function() {
    mod('class', 'add', 4000);
});

function mod(class, type, targetVal) {
    var $class = $(class);
    var numb = parseInt($class.html());
    numb = (type == 'add') ? numb + 1 : numb - 1;
    $class.html(numb);
    if (numb != targetVal) {
        setTimeout('mod("' + class + '","' + type + '",' + targetVal)', counterTimeout);
    }
}

$ class.html（）が 'add'の場合はtargetValより大きい値で開始し、他の場合はtargetValより小さい値で開始するイベントでは、基本ケースは満たされません。関数呼び出しを行う前に、これが発生しないことを確認する必要があります。