用于更新的 Jquery 数字计数器答案

【问题标题】：Jquery number counter for updates用于更新的 Jquery 数字计数器
【发布时间】：2016-07-25 15:47:08
【问题描述】：

我有这个 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>

【问题讨论】：

这里的问题在哪里？为什么不能进行 1 次函数调用？
不知道写1函数。这是我的问题。

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

当您发现自己正在重写大量相似的代码时，转向一个通用函数是正确的方法！最好的开始方法是尝试确定您的参数是什么：

count 和 count2 表明您需要一个开始计数才能让您的计时器开始计时
sumemp 和 sumpallis 表明您需要能够指定最大计数
inTv 和 inTv 表明您需要能够设置间隔
$('.stats_iss') 和 $('.stats_em') 表明您需要能够确定输出元素

这意味着您的最终类、函数或 jquery 扩展将至少具有类似于以下的签名：

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

写完后，您可以粘贴已有的代码。（我已经用setTimeout 替换了你的setInterval，除此之外，没有太大变化）

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>

【讨论】：