使用Javascript定期设置数字动画

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

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

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

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

setInterval（函数（）{
currNum=数字（$（“.count”）.text（）；
if（currenm

我的问题是：有没有更好的方法来做到这一点，而不需要一个间歇不断运行？这是否是我可以从异步请求的响应中调用的动态增量，然后在这两个数字的值满足时停止？我还要指出，下一个请求可能会在这两个数字的价值调整之前发生

---

集体你会怎么做？

正确答案：

对于评论者：我已经意识到我自己。。。还是谢谢你

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

var interval=setInterval（函数（）{
currNum=数字（$（“.count”）.text（）；
if（currenm

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

第一个答案：

为什么不将这两个功能结合起来，即：

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

setInterval（函数（）{
$.post（“getcount.php”，函数（num）{
latestNum=num；
if（currenm

---

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

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

基于答案，我建议使用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);

var interval=null，currNum=null；
setInterval（函数（）{
$.post（“getcount.php”，函数（num）{
latestNum=num；
如果（currNum==null）
currNum=Number（$（“.count”）.text（）；//应该只执行一次
if（currNum

修改

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

函数ObalixFunction（）{
if（currenm
这是我的答案-实际上是两个答案。

以固定的时间间隔线性地向目标值迈进有可能永远达不到目标值。

因此，我还提供了另一种解决方案，每次都能将差异减半，即使差异很大，也能更快地达到目的。

这两个例子也可以倒计时

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

$（函数（）{
var tRef，
计数器=$（“#计数器”）；
目标=$（“#目标”）；
/*
*一种易于实现其目标的功能
*/
功能（目标）{
清除超时（tRef）；
target=parseInt（目标）；
var current=parseInt（counter.html（））；
var diff=目标-电流；
if（diff）{
var rounder=diff>0？Math.ceil:Math.floor；
电流+=圆化器（差/2）；
html（当前版本）；
tRef=setTimeout（函数（）{
目标公司；
}, 250 );
}
}
/*
*向其目标缓慢前进的函数
*/
函数收敛线性（目标）{
清除超时（tRef）；
target=parseInt（目标）；
var current=parseInt（counter.html（））；
var diff=目标-电流；
if（diff）{
电流+=diff>0？1:-1；
html（当前版本）；
tRef=setTimeout（函数（）{
线性（目标）；
}, 250 );
}
}
/*
*为了演示，我在这里模拟了您的ajax请求
*根据您的问题使用线性方式
*/
setInterval（函数（）{
var n=Math.round（Math.random（）*1000）；
html（n）；
收敛线性（n）；
}, 5000 );
});
20
20

我想缓和策略可能是传递的函数，而不是复制它们的大部分代码的两个函数
我想通过中间部分来设置动画。这种方法只是将当前值替换为新值。
$( 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>