Jquery计数器不起作用

Question

我试图创建jquery计数器

$.fn.counter = function (num) {
var self = $(this);
for (var i = 1; i <= num; ++i) {
    setInterval(function () {
        self.html(i);
    }, 4000);
}
};

$('div').counter(100);

http://jsfiddle.net/Rdy5B/14/

页面加载后我需要将块中的值增加到某个值，然后计数器停止。为什么我的代码不起作用？

Answer 1

像这样使用，

var i=0;
setInterval(function () {
        i++;
    $("div").html(i);
    }, 4000);

你不必使用for循环来递增计数器。由于setInterval重复调用，您可以将逻辑放在那里。

Demo

修改

var myVar = setInterval(function(){myTimer()},1000);
var i=0;
var num=4;
function myTimer()
{
    i++;
    $("div").html(i);
    if(i==num)
    {
        myStopFunction();
    }
}

function myStopFunction()
{
clearInterval(myVar);
}

Updated demo

Answer 2

问题是闭包变量和setInterval()

的错误用法

$.fn.counter = function (num) {
    var i = 1,
        self = $(this).html(i);
    var interval = setInterval(function () {
        self.html(++i);
        if (i >= num) {
            clearInterval(interval)
        }
    }, 1000);
};

$('div').counter(3);

Answer 3

你的for被执行，一个setInterval将被解雇（因为它会等待4秒）。

你可以在这个区间内改变你的并且增加i，如：

$.fn.counter = function (num) {
    var self = $(this);
    var i=0;
    var int = setInterval(function () {        
        if (i > num) {
            clearInterval(int)
            return
        }
        i++;
        self.html(i);
    }, 4000);

};

$('div').counter(100);

演示：http://jsfiddle.net/5MjfT/