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) { }

一旦您编写了此内容，就可以粘贴已有的代码。（我已将[{1}}替换为setInterval，除此之外，没有太大变化）

＆＃13;

setTimeout

＆＃13;

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();
});

＆＃13;

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

＆＃13;

更新的Jquery数字计数器

2 个答案: