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

的問題是一個閉包變量的錯誤使用和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 2

使用這樣，

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

你不必使用循環計數器遞增。由於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 3

你FO r被執行並且一個setInterval將被觸發（因爲它等待4秒）。

您可以chenge你並增加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/