3

目標数に達するまで数値をインクリメントする単純な Javascript アニメーションを作成しようとしています。ただ、今のやり方ではうまくいきません。

ここに私のコードがあります: http://jsfiddle.net/nLMem/4/

HTML

<div id="number">5</div>

JS

$(document).ready(function() {
    var target = 50;
    var number = $('#number').text();

    while(number <= target) {
        setTimeout(function() {
            $('#number').text(++number);
        }, 30);
    }
});
4

2 に答える 2

13

これはあなたが望むものに似ています：

   var interval = setInterval(function() {
        $('#number').text(number);
        if (number >= target) clearInterval(interval);
        number++;
    }, 30);

while ループにより、スクリプトの実行が作業中に「フリーズ」します。ポーリングしません。setTimeoutもう 1 つの問題は、潜在的に 50 回呼び出すことです。通話setIntervalは 1 回だけで、目的の番号に到達したら解除できます。

于 2013-08-09T17:55:19.550 に答える
4

これは user1508519 コードに基づいたソリューションで、自動的にインクリメント/デクリメントされ、 ajax 検索/フィルター後に私のページでライブ更新されます。

function animateResultCount(number, target, elem) {
    if(number < target) {
        var interval = setInterval(function() {
            $(elem).text(number);
            if (number >= target) {
                clearInterval(interval);
                return;
            }
            number++;
        }, 30);
    }
    if(target < number) {
        var interval = setInterval(function() {
            $(elem).text(number);
            if (target >= number) {
                clearInterval(interval);
                return;
            }
            number--;
        }, 30);
    }
}

ajaxの成功で私の関数を呼び出す：

...
success: function(response) {
    $('div#results').html(response.html);
    animateResultCount($('#rescount').html(),response.newcount,'#rescount');
}
...
于 2016-04-18T15:12:15.543 に答える