0

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 を使用して遅延を発生させることでしたが、これによりスクリプト全体がかなり失敗します。

アドバイスをいただければ幸いですが、この一見単純なタスクに大きなプラグインを使用することはお勧めしません。

4

3 に答える 3

3

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

setTimeoutはい、またはsetInterval/を使用する必要がありますclearInterval。または、コードをわかりやすくするために、jQuery の「待機」プラグインを使用できます。

// (code to get new value goes here)

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

Instead of html(), I've used text(), since it looks like you don't need to change any HTML structure.

于 2009-10-26T22:34:54.310 に答える
2

提供されたコードを実行すると、無限ループに陥りました。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);
    }
}
于 2009-10-26T22:26:55.453 に答える
0

私は 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 よりも低い値で始まる場合、基本ケースは満たされていません。関数呼び出しを行う前に、これが起こらないようにする必要があります。

于 2009-10-26T23:02:47.327 に答える