带对象的 Javascript 计时器

Question

我试图制作一种与我的计时器一起使用的对象。问题是，当我只有裸函数(不在对象中)时，它就可以工作。但是当我把它放在对象内部时它不起作用。

使用此代码我只能看到 00:01

当我只使用函数本身时，它工作正常，我希望将它们放在对象中，因为我的代码中将有更多函数。

感谢帮助

$(document).ready(function() {
  var Timer = {
    TimerID: null,
    elapsed: 0,
    changeTimer: function() {
      this.TimerID = setInterval(this.timerTick(), 1000);
    },
    timerTick: function() {
      this.elapsed++;
      var minutes = Math.floor(this.elapsed / 60);
      var seconds = this.elapsed - (minutes * 60);
      if (minutes < 10) minutes = "0" + minutes;
      if (seconds < 10) seconds = "0" + seconds;
      $('.timer-html').text(minutes + ":" + seconds);
    },
    stopTimer: function() {
      clearInterval(this.TimerID);
    }
  };
  console.log(Timer);
  $(".timer").click(Timer.changeTimer());
  $(".stop-timer").click(Timer.stopTimer());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:;" class="timer">start clock</a>
<a href="javascript:;" class="stop-timer">stop clock</a>
<h1 class="timer-html">00:00</h1>

Answer 1

$(document).ready(function() {

    var Timer = {
        TimerID : null,
        elapsed : 0,

        changeTimer: function () {
           //here you need to send the delegate function without ()            //.. setInterval(this.timerTick
            //this.TimerID = setInterval(this.timerTick.bind(this), 1000);
            //arrow function variant
             this.TimerID = setInterval(()=>this.timerTick(), 1000);
        },

        timerTick: function ()
        {  
            this.elapsed++;
            var elapsed =  this.elapsed;
            var minutes = Math.floor(elapsed / 60);
            var seconds = elapsed - (minutes * 60);

            if (minutes < 10)
                minutes = "0" + minutes;

            if (seconds < 10)
                seconds = "0" + seconds;

            $('.timer-html').text(minutes + ":" + seconds);
        },

        stopTimer: function () {
           clearInterval(this.TimerID);
        }
    };

    console.log(Timer);
    //here you to keep the timer context, you can use arrow function
    //.. ()=> or .bind(Timer)
    $(".timer").click(()=> Timer.changeTimer());
    $(".stop-timer").click(()=> Timer.stopTimer());
    //.bind() variant
    // $(".timer").click(Timer.changeTimer.bind(Timer));
    // $(".stop-timer").click(Timer.stopTimer.bind(Timer));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a href="javascript:;" class="timer">start clock</a>
<a href="javascript:;" class="stop-timer">stop clock</a>
<h1 class="timer-html">00:00</h1>