Question

与上一个问题相关：How to stop a Javascript Timer after the second countdown?

我找到了一种方法让我的番茄钟能够正常运行，但我的代码非常重复。在没有第二个中断计时器连续运行的情况下，我无法找到一种不重新创建相同（或非常相似的功能）的方法。有什么想法吗？

   function startTimer(duration, display) {
      var timer = duration, minutes, seconds;

  var countdown = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        //minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

      $(".startClock").click(function () {
          clearInterval(countdown);
        }); 
        if (--timer < 0) {
              clearInterval(countdown);
              breakClock();
              }
    }, 500);
  } 

  function breakTimer(duration, display) {
      var timer = duration, minutes, seconds;

  var countdown = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        //minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

      $(".startClock").click(function () {
          clearInterval(countdown);
        }); 
        if (--timer < 0) {
              clearInterval(countdown);  
              }
    }, 500);

  $("body").css("background-color", "#E13F86");             

  $("#title").text(function(i, text){
       return text === 'Breaktime' ? 'Productive Countdown' : 'Breaktime'
            });
   } 

  var display = document.querySelector('#time');

  function startClock() {
            var twentyfiveMinutes = 60 * .25;
            startTimer(twentyfiveMinutes, display);

  }

  function breakClock() {
            var fiveMinutes = 60 * .05;
            breakTimer(fiveMinutes, display);    
  }

  $(".startClock").on("click", function() {
   startClock();

  });

这也是我的codepen：http://codepen.io/cenjennifer/pen/pjzBVy?editors=101

Answer 1

你的代码很好。 jfriend00是对的，这段代码确实属于代码审查页面。

但是既然我在这里，我会给出一些反馈意见。创建一个对象（使用function（）{}），并将所有函数放在对象中。

不是在每个函数中重新创建所有变量，而是在对象内部创建它们，以便所有函数都可以访问它们，这样您就不需要继续重新创建它们。（计时器，小时，分钟等变量应作为对象属性移动）。

此外，不要使用全局变量，它们可能会干扰您以后可能会发现有用的库。您应该命名空间，以便代码更有条理，并且不会被其他全局变量覆盖。

Answer 2

重用该函数的简单方法是共享setInterval返回的计时器，并在startTimer函数中提供回调（用于启动和中断）。回调（如果提供）负责在计时器完成后运行的代码。因此，startTimer可以省略特定代码。此外，由于计时器是共享的，无论何时启动，原始循环都可以在再次调用时再次停止（再次单击该按钮），因此也可以从startTimer函数中省略，从而使其为可重用性做好准备。整体看起来像是：

var currentcountdown;
var display = document.querySelector('#time');

function startTimer(duration, callback) {
      var timer = parseInt(duration), minutes, seconds;
      clearInterval(currentcountdown);
      currentcountdown = setInterval(function () {

        minutes = Math.floor(timer / 60);
        seconds = Math.floor(timer % 60);

        //minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;    

        if (--timer < 0) {
              clearInterval(currentcountdown);
              if(callback)
                callback();              
              }
    }, 500);
} 


function startClock() {
            $("body").css("background-color", "black");
            $("#title").text('Productive Countdown');
            var twentyfiveMinutes = 60 * .25;
            startTimer(twentyfiveMinutes, breakClock);            
}

function breakClock() {
            $("body").css("background-color", "#E13F86");
            $("#title").text('Breaktime');
            var fiveMinutes = 60 * .05;
            startTimer(fiveMinutes);    
}

$(".startClock").on("click", function() {
   startClock();
});

正如在另一篇文章中提到的，合成糖将把所有值放入对象（例如持续时间/背景/标题）中，并可选择将计时器及其变量（显示/计时器）放入对象中，但是直接进行上述功能的可重用性应该是一个良好的开端。

减少重复的Javascript函数

2 个答案: