Question

我使用以下代码在Javascript中创建倒计时。 n是重复的次数，freq是执行前等待的毫秒数，funN是每次迭代时调用的函数（通常是更新部分DOM的函数），funDone是倒计时时调用的函数完成了。

function timer(n, freq, funN, funDone)
{
    if(n == 0){
        funDone();
    }else{
        setTimeout(function(){funN(n-1); timer(n-1, freq, funN, funDone);}, freq);      
    }
}

可以像这样调用：

    timer(10,
      1000, /* 1 second */
      function(n){console.log("(A) Counting: "+n);},
      function() {console.log("(A) Done!");}
     );

    timer(10,
      500,
      function(n){console.log("(B) Counting: "+n);},
      function() {console.log("(B) Done!");}
     );

这样做的好处是我可以根据需要多次调用timer（）而不用担心全局变量等。有更好的方法吗？是否有一种干净的方法使setInterval在一定数量的调用后停止（不使用全局变量）？这段代码也创建了一个新的lambda函数，每次调用setTimeout，这似乎对大型倒计时有问题（我不确定javascript的垃圾收集器如何处理这个）。

有更好的方法吗？感谢。

Answer 1

这与@balabaster基本相同，但它经过测试，使用原型，并且具有更灵活的界面。

var CountDownTimer = function(callback,n,interval) {
     this.initialize(callback,n,interval);
}

CountDownTimer.prototype = {
     _times : 0,
     _interval: 1000,
     _callback: null,
     constructor: CountDownTimer,
     initialize: function(callback,n,interval) {
                     this._callback = callback;
                     this.setTimes(n);
                     this.setInterval(interval);
                 },
     setTimes: function(n) {
                     if (n)
                         this._times = n
                     else
                         this._times = 0;
                 },
     setInterval: function(interval) {
                     if (interval)
                         this._interval = interval
                     else
                         this._interval = 1000;
                 },
     start: function() {
                     this._handleExpiration(this,this._times);
                 },
     _handleExpiration: function(timer,counter) {
                     if (counter > 0) {
                        if (timer._callback) timer._callback(counter);

                        setTimeout( function() {
                                           timer._handleExpiration(timer,counter-1);
                                          },
                                          timer._interval
                                      );
                     }
                 }
};

var timer = new CountDownTimer(function(i) { alert(i); },10);

...

<input type='button' value='Start Timer' onclick='timer.start();' />

Answer 2

我创建了一个接收计数器并接收要执行的函数指针的对象，类似于以下伪代码：

TimedIteration = function(interval, iterations, methodToRun, completedMethod){

  var counter = iterations;
  var timerElapsed = methodToRun;  //Link to timedMethod() method
  var completed = callbackMethod;

  onTimerElapsed = function(){
    if (timerElapsed != null)
      timerElapsed();
  }

  onComplete = function(){
    if (completed != null)
       completed();
  }

  timedMethod = function(){
    if (counter != null)
      if (counter > 0) {
        setTimeOut(interval, onTimerElapsed);
        counter--;
      }
      else
        onComplete();
      this = null;
    }
  }

  if ((counter != null)&&(counter > 0)){
    //Trip the initial iteration...
    setTimeOut(interval, timedMethod);
    counter--;
  }  
}

显然这是伪代码，我没有在IDE中进行测试，在语法上我不确定它是否会按原样运行[如果它确实会让我感到惊讶]，但基本上你正在做什么你是在创建一个包装器对象，它接收一个时间间隔，一些迭代和一个在计时器运行时运行的方法。

然后你可以在你的方法上调用它来像这样运行：

function myMethod(){
  doSomething();
}

function doWhenComplete(){
  doSomethingElse();
}

new TimedIteration(1000, 10, myMethod, doWhenComplete);

Answer 3

我比你提出的替代方案更喜欢你的原始解决方案，所以我只是将它改为不为每次迭代创建一个新函数（fun()的参数现在是递减之前的值 - 如果需要改变.. 。）

function timer(n, delay, fun, callback) {
    setTimeout(
        function() {
            fun(n);
            if(n-- > 0) setTimeout(arguments.callee, delay);
            else if(callback) callback();
        },
        delay);
}

让事件发生n次的最佳方式是什么？

3 个答案: