Question

我编写了以下用于在JS中实现计时器的代码。但问题是，对于后续的递归调用，该方法会抛出timeChkSplitTime的引用错误。它是如何在settimeout()中传递的。此外，后来我使用了easy timer js lib。如果可能的话，请提供一个单独和几秒钟配置计时器的想法。

function timeChkold(timeChkSplitTime) {
    var min = timeChkSplitTime[0], sec = timeChkSplitTime[1];
    if (!(timeChkSplitTime[0]==0 && splitTime[1]==0)) {
        var strSec, strMin = "0"+min.toString();
        if (sec < 10) strSec = "0"+ sec.toString();
        else strSec = sec.toString();
        $(".timer-btn time").html(strMin+":"+strSec);
        timeChkSplitTime[0]=0;
        if (sec > 0) timeChkSplitTime[1]--;
        else timeChkSplitTime[1] = 59;
        setTimeout( "timeChk(timeChkSplitTime);", 1000);
    }
    else {
        var startBtn = $(".start-btn");
        startBtn.html("Start");
        startBtn.css( {
            "border": "1px solid #56B68B",
            "background": "#56B68B",
        });
        var startTime = "01:00";
        $(".timer-btn time").html(startTime);
    }
}

Answer 1

变量不是通过字符串解析的，代码为

setTimeout( "timeChk(timeChkSplitTime);", 1000);

它实际上将参数读取为文本timeChkSplitTime的值，而不是变量timeChkSplitTime的值。除了使用字符串之外，还可以使用setTimeout的函数：

setTimeout( timeChk(timeChkSplitTime), 1000);

Answer 2

setTimeout( "timeChk(timeChkSplitTime);", 1000);

应该是

setTimeout( timeChk(timeChkSplitTime), 1000);

Answer 3

你的代码有点意大利面条代码。你应该从视图中分离你的代码逻辑。将它们分成函数。最重要的是，在这种情况下使用setTimeout效率不高。

＆＃13;

var CountdownTimer = function(startTime) {
  var timeInSeconds = this.stringToSeconds(startTime);
  this.original = timeInSeconds;
  this.time = timeInSeconds;
  this.running = false;
}

CountdownTimer.prototype.start = function(callback) {
  this.running = true;
  this.interval = setInterval(function() {
      if(this.time < 1) {
        this.running = false;
        clearInterval(this.interval);
      } else {
        this.time -= 1;
        callback();
      }
  }.bind(this), 1000);
}

CountdownTimer.prototype.pause = function() {
  if(this.running) {
    this.running = false;
    clearInterval(this.interval);
  }
}
CountdownTimer.prototype.restart = function() {
  this.time = this.original;
}

CountdownTimer.prototype.stringToSeconds = function(timeSting) {
  var timeArray = timeSting.split(':');
  var minutes = parseInt(timeArray[0], 10);
  var seconds = parseInt(timeArray[1], 10);
  var totalSeconds = (minutes*60) + seconds;
  return totalSeconds;
}
CountdownTimer.prototype.secondsToStrings = function(timeNumber) {
  finalString = '';
  var minutes = parseInt(timeNumber/60, 10);
  var seconds = timeNumber - (minutes*60);
  var minStr = String(minutes);
  var secStr = String(seconds);
  if(minutes < 10) minStr = "0" + minStr;
  if(seconds < 10) secStr = "0" + secStr;
  return minStr + ":" + secStr;
}

＆＃13;

要运行此代码，您可以添加以下内容

var countdownTest = new CountdownTimer("01:15");
countdownTest.start(onEachTick);

function onEachTick() {
  var time = countdownTest.secondsToStrings(countdownTest.time);
  console.log(time)
}

您可以在onEachTick功能中编写自定义代码。您可以通过键入countdownTest.running来检查计时器是否正在运行。

您也可以重启并暂停计时器。现在，您可以根据需要自定义视图。

javascript中的计时器实现

3 个答案: