4

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

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

我的问题是：有没有更好的方法来做到这一点，而无需不断运行间隔？我可以从异步请求的响应中调用这个动画递增的东西，然后在两个数字的值满足后让它停止吗？我还应该指出，下一个请求可能会在这两个数字的价值被调和之前发生。

你会怎么做这个集体？

4

4 回答 4

2

更正答案：

致评论者：已经意识到我自己......仍然谢谢你！

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

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

于 2010-02-25T16:45:04.377 回答
1

在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);
    }
}
于 2010-02-25T17:21:12.307 回答
1

这是我的答案——实际上是两个答案。
以固定的时间间隔线性地向目标值迈进，可能永远达不到目标值。
因此，我也提供了另一种解决方案，每次将差异减半，即使差异很大，也能更快地到达那里。
这两个例子也可以倒计时。

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

我想缓动策略可能是传入的函数，而不是复制大部分代码的两个函数

于 2010-02-25T20:46:09.890 回答
0

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

于 2010-02-25T16:50:29.250 回答