Question

我的页面上有一个元素，我想不时增加：

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

在我的javascript中，我有一个每5秒运行一次的间隔，并从服务器异步地抓取新的（更高的）数字。这有点像计数器一样。

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

如果异步请求下拉数字56，我希望看到段落文本从28变为56，显示许多（或大多数）或中间体递增时。我目前正在做的是设置另一个间隔来不断检查段落文本和局部变量。如果段落文本低于变量值，则将其递增1.它每隔半秒执行一次。

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

我的问题是：如果没有间隔持续运行，有没有更好的方法来做到这一点？这是一个动画递增的东西，我可以从异步请求的响应调用，然后一旦两个数字达到值，它就停止了吗？我还应该注意，下一个请求可能会在两个数字的价值进行协调之前发生。

集体你如何做到这一点？

Answer 1

更正回答：

评论者：已经意识到自己......还是谢谢你！

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

这会在变量中保存间隔，然后调用clearInterval来停止间隔。需要setTimeOut，否则在执行时间隔将被清除。

第一回答：

为什么不组合这两个功能，即：

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

这会阻止每半秒更新一次。

Answer 2

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

Answer 3

这是我的答案 - 实际上是两个答案以固定间隔线性地朝目标值步进的风险永远不会到达那里所以我也提供了另一种解决方案，每次都会将差异减半，即使对于很大的差异也能更快地达到目标这两个例子也可以倒数。

$( 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>

我认为缓和策略可以是传入的函数，而不是复制其大部分代码的两个函数

Answer 4

我会在收到结果时产生第二个间隔，并在达到目标值时终止它。

使用Javascript定期设置数字动画

4 个答案: