Jquery數字計數器的更新

Question

我有這個jQuery的功能。我想讓它只是一個函數，所以我可以通過調用一個函數並傳遞一些參數來獲得相同的結果。

正如你所看到的，這個函數的計數基本上是一樣的。我希望只有一個函數，然後解析出參數以獲得相同的結果。像startcount（arg1，arg2）;

var one_countsArray = [2,4,6,7,4252]; 
 
var two_countsArray = [3,3,4,7,1229]; 
 

 
var sumemp = one_countsArray.reduce(add, 0); 
 
var sumallis = two_countsArray.reduce(add, 0); 
 

 
    function add(a, b) { 
 
     return a + b; 
 
    } 
 
    var count = 0; 
 

 
    var inTv = setInterval(function(){startCount()},100); 
 

 
    var inTv2 = setInterval(function(){startCount2()},100); 
 

 
    function startCount() 
 
    { 
 
     if(count == sumemp) { 
 
      clearInterval(inTv); 
 
     } else { 
 
      count++; 
 
     } 
 
     $('.stats_em').text(count); 
 
     
 
    } 
 

 
    var count2 = 10; 
 
    function startCount2() 
 
    { 
 
     if(count2 == sumallis) { 
 
      clearInterval(inTv2); 
 
     } else { 
 
      count2++; 
 
     } 
 
     $('.stats_iss').text(count2); 
 
    }

div { 
 
    padding:50px 0; 
 
    background: #000000; 
 
    color: #ffffff; 
 
    width: 100px; 
 
    height:100px; 
 
    border-radius:50%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 

 
<div class="stats_em"></div> 
 
<div class="stats_iss"></div>

Answer 1

怎麼樣一個非常簡單的jquery plugin

$.fn.countTo = function(arrNums){ 
 
    var self = this; 
 
    function add(a,b){ 
 
     return a+b; 
 
    } 
 
    
 
    var current = 0; 
 
    var max = arrNums.reduce(add,0); 
 
    
 
    var int = setInterval(function(){ 
 
     if(current == max) 
 
     clearInterval(int); 
 
     else 
 
     current++; 
 
     
 
    self.text(current); 
 
    },100); 
 
    return this; 
 
} 
 

 

 
$('.stats_em').countTo([2,4,6,7,4252]); 
 
$('.stats_iss').countTo([3,3,4,7,1229]);

div { 
 
    padding:50px 0; 
 
    background: #000000; 
 
    color: #ffffff; 
 
    width: 100px; 
 
    height:100px; 
 
    border-radius:50%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="stats_em"></div> 
 
<div class="stats_iss"></div>

Answer 2

當你發現你重寫相似的代碼塊，移動到一個通用功能正確的做法！最好的開始方式是試圖確定你是什麼樣的參數是：

• count和count2表明，你需要開始計數的計時器在
• sumemp和sumpallis表明，你需要開始能夠指定一個最大計數
• inTv和inTv說明你需要能夠設置間隔
• $('.stats_iss')和$('.stats_em')說明你需要能夠確定輸出元件

這意味着你的最後一類，函數或jQuery的延伸將至少有類似於這樣的簽名：

function(startCount, maximumCount, interval, outputElement) { } 

一旦你寫了這個，你可以在你已有的代碼粘貼。 （我已經更換了你setInterval有setTimeout，除此之外，沒有太大的變化）

var createCounter = function(start, max, interval, outputElement) { 
 
    var count = start; 
 
    var timeout; 
 

 
    var start = function() { 
 
    count += 1; 
 
    outputElement.text(count); 
 
    if (count < max) { 
 
     timeout = setTimeout(start, interval); 
 
    } 
 
    } 
 

 
    var stop = clearTimeout(timeout); 
 

 
    return { 
 
    start: start, 
 
    stop: stop 
 
    } 
 
} 
 

 
var one_countsArray = [2, 4, 6, 7, 300]; 
 
var two_countsArray = [3, 3, 4, 7, 100]; 
 

 
var sumemp = one_countsArray.reduce(add, 0); 
 
var sumallis = two_countsArray.reduce(add, 0); 
 

 
function add(a, b) { 
 
    return a + b; 
 
} 
 

 
var counters = [ 
 
    createCounter(0, sumemp, 100, $('.stats_em')), 
 
    createCounter(10, sumallis, 100, $('.stats_iss')) 
 
]; 
 

 
counters.forEach(function(counter) { 
 
    counter.start(); 
 
});

div { 
 
    padding: 50px 0; 
 
    background: #000000; 
 
    color: #ffffff; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 

 
<div class="stats_em"></div> 
 
<div class="stats_iss"></div>