Question

我对此感到困惑，但我确信有一个解释。我正在开发一个个人培训网络应用程序，我有一个计时器，每当它到达00:00时，它应该转到00:10并停止。计时器使用我写的这个函数：

//timer object function
function Timer(element, callback) {

  var ac, minutes, seconds, finalTimeInSeconds, displayMinutes, displaySeconds, interval = 1000,
    self = this,
    timeLeftToNextSecond = 1000,
    running = false;

  this.set = function(inputMinutes, inputSeconds) {

    finalTimeInSeconds = inputMinutes * 60 + inputSeconds;
    minutes = (Math.floor(finalTimeInSeconds / 60));
    seconds = finalTimeInSeconds % 60;

    this.print();
  }

  this.add = function(inputMinutes, inputSeconds) {

    finalTimeInSeconds += inputMinutes * 60 + inputSeconds;
    finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds;
    minutes = (Math.floor(finalTimeInSeconds / 60));
    seconds = finalTimeInSeconds % 60;

    this.print();
  }

  this.subtract = function(inputMinutes, inputSeconds) {

    finalTimeInSeconds -= inputMinutes * 60 + inputSeconds;
    if (finalTimeInSeconds < 0) {
      callback()
    }
    finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds;
    minutes = (Math.floor(finalTimeInSeconds / 60));
    seconds = finalTimeInSeconds % 60;
    this.print();
  }

  this.reset = function() {

    this.set(0, 0);
  }

  this.print = function() {

    displayMinutes = (minutes.toString().length == 1) ? "0" + minutes : minutes; //ternary operator: adds a zero to the beggining 
    displaySeconds = (seconds.toString().length == 1) ? "0" + seconds : seconds; //of the number if it has only one caracter.

    $(element).text(displayMinutes + ":" + displaySeconds);
  }

  this.run = function() {

    if (running == false) {
      running = true;

      var _f = function() {
        secondStarted = new Date;
        self.subtract(0, 1);
        interval = 1000;

        ac = setTimeout(_f, interval);


      }
      ac = setTimeout(_f, interval);


    }
  }

  this.stop = function() {

    if (running == true) {
      running = false;
      console.log(this + "(" + element + ") was stopped");
      stopped = new Date;
      interval = 1000 - (stopped - secondStarted);
      clearTimeout(ac);
    }
  }

  this.getTotalTimeInSeconds = function() {


    return finalTimeInSeconds;
  }

  this.reset();

}

我所做的是创建一个这样的计时器：

globalTimer = new Timer("#globalTimer", function() {
            globalTimer.stop();
            globalTimer.set(0,10);
        });

然后我将其设置为00:15并运行它：

globalTimer.set(0,15);
globalTimer.run();

由于某种原因，当计时器到达零时，它设置为00:10，但它不会停止。问题是，在它到达00:00之前，我可以用控制台阻止它并且它完美地工作;但是当计时器变为零时，.stop()函数就不再起作用了。点击here查看我制作的演示。为什么会这样？ Timer函数有问题吗？非常感谢。

Answer 1

在setTimeout回调函数中为'running'变量添加一个简单的检查就足够了。我想你可能会对setTimeout和setInterval之间的区别感到有些混淆。

我只是从你的'stop'函数中删除了clearTimeout，因为它不是必需的，并且更改了你的'run'函数来检查你的'globalTimer'是否'正在运行'并且它按你所描述的那样工作。

this.run = function() 
{
    var _f = function() {
        secondStarted = new Date;
        self.subtract(0, 1);
        interval = 1000;

        var theColorIs = $(element).css("color");
        if (running == true)
        {
            ac = setTimeout(_f, interval);
        }
    }

    if (running == false) 
    {
        running = true;
        ac = setTimeout(_f, interval);
    }
}

Answer 2

原因是变量running仍然设置为false，只需在关闭stop函数中的if语句后添加以下行。

running = true;

这是代码提取。

this.stop = function() {
    if (running == true) {
        running = false;
        console.log(this + "(" + element + ") was stopped");
        stopped = new Date;
        interval = 1000 - (stopped - secondStarted);
        clearTimeout(ac);
    }
    running = true;
}

Javascript：函数有时工作，其他时候只是没有做任何事情

2 个答案: