javascript - 函数中的 Javascript clearInterval

Question

我是 Javascript 或 jQuery 中的 OOP 新手，我正在尝试清除间隔并停止间隔内的任何方法，它似乎不适用于我在下面所做的。

function Timer() {
    var sec = $('.timer #second');

    this.runTimer = function(_currentime) {
        var currentTimeing = parseInt($(_currentime).text());
        this.timeInterval = setInterval(function() {
            $('.projects li span.second').text(currentTimeing++)
        }, 1000); 

        $("#stop").click(function() {
            // clear interval
            clearInterval(this.timeInterval);
        })
    }
}

var play = new Timer();

$("#start").click(function(){
    //console.log(this.runTimer())
    play.runTimer('#second');
})

Answer 1

您this在不同功能的上下文中使用，这就是它无法正常工作的原因。尝试：

 function Timer() {

    var sec = $('.timer #second');

    this.runTimer = function(_currentime) {

      var currentTimeing = parseInt($(_currentime).text()), that = this;
      that.timeInterval = setInterval(function(){
        $('.projects li span.second').text(currentTimeing ++)
      }, 1000); 

      $("#stop").click(function(){
        // clear interval
        clearInterval(that.timeInterval);
      })
    }
  }

  var play = new Timer();

  $("#start").click(function(){
    //console.log(this.runTimer())
    play.runTimer('#second');
  })

我只是this在that变量中保存对正确的引用，所以我以后可以用它来清除间隔。

Answer 2

function Timer() {

    var sec = $('.timer #second');
    var timeinterval;   // declare timeinterval variable here
    this.runTimer = function(_currentime) {

      var currentTimeing = parseInt($(_currentime).text());
      timeInterval = setInterval(function(){
        $('.projects li span.second').text(currentTimeing ++)
      }, 1000); 

      $("#stop").click(function(){
        // clear interval
        clearInterval(timeInterval);
      })
    }
  }

  var play = new Timer();

  $("#start").click(function(){
    //console.log(this.runTimer())
    play.runTimer('#second');
  })