Question

基本上我有一个类计数系统，它显示类的数量并在span元素中显示它们。以下是代码：

$.get('other.html', function(data) {
$('#total').html($('.doc', data).length);
});

这很好用，但是我想要一种方法让数字逐个增加，因为当页面加载时span元素包含0。这是一个example (the numbers increasing on here).

为此，我尝试了setTimeout，尽管这无论如何都没有用，我发布它只会延迟功能然后显示结束号码。我听说过periodical或类似的东西被使用但在示例源代码中找不到。

我真的很抱歉更糟糕的措辞。如果您不知道我的意思，那么请问，我会尝试改写或找到一个更好的例子。

Answer 1

密钥是增加数量的函数，应该在终止之前设置setTimeout来调用自身。这样它将再次被调用。如果希望选项停止递增，则可以添加全局变量，该函数仅在该变量为真时设置新的超时。

示例：

var doIncrement = true;
var numberToIncrement = 0;

function increment {
    numberToIncrement++;
    $('#mySpan').text(numberToIncrement);
    if (doIncrement) {
        setTimeout(increment, 1000);
    }
}

Answer 2

您可以使用setInterval函数，该函数允许您以某个时间间隔运行代码。 clearInterval允许停止任务。

http://jsfiddle.net/d52Pw/

var $totalEl = $('#total');

$.get('other.html', function(data) {
    var len = $('.doc', data).length,
        count = 0,
        int = setInterval(function () {
            if (++count === len) {
               //when we reach len, we stop the task
               clearInterval(int);
            }

            $totalEl.html(count);
        }, 500); //run every 1/2 sec
});

使总数计数似乎增加

2 个答案: