SetInterval在對象的方法中的問題

Question

我無法弄清楚爲什麼當我調用對象的重置方法時，定時器仍爲空。我簡化了我的對象的版本，下面是構建一個新對象並運行代碼的jQuery。見我的具體問題點的大寫評論。謝謝！

var countdownTimer = { 
     // Default vars 
     milliseconds: 120000, 
     interval: 1000, 
     timer: false, 

     /* ... stuff ... */ 
     countdown: function() { 
      var root = this; 
      var originalTime = root.milliseconds; 
      /* ... stuff */ 
      // IN MY MIND THIS NEXT LINE SETS THE INSTANCE OF THIS OBJECT'S TIMER PROPERTY TO THE setIterval's ID. BUT DOESN'T SEEM TO BE CORRECT. WHY? 
      root.timer = setInterval(function() { 
       if (root.milliseconds < 1) { 
        clearInterval(root.timer); // THIS LINE SEEMS TO WORK 
        root.countdownComplete(); // callback function 
        return false; 
       } 
       root.milliseconds = root.milliseconds - root.interval; 

       /* .... stuff ... */ 
      }, root.interval); 
     }, 
     start: function (ms) { 
      if (ms) { 
       this.milliseconds = ms; 
      } 
      if(this.timer) { 
       clearInterval(this.timer); // NOT SURE IF THIS WORKS OR NOT 
      } 
      this.countdown(); 
     }, 
     reset: function (ms) { 
      var root = this; 
      if(root.timer) { 
       clearInterval(root.timer); // THIS DOES NOT WORK 
      } else { 
       console.log('timer not exist!!!!'); // ALWAYS END UP HERE. WHY? 
      } 
      /* .... stuff ... */ 
     }, 
     countdownComplete: function() { } 

    }; 

// Setting up click events to create instances of the countdownTimer 
$(function() { 
    var thisPageCountdown = 4000; 

    $('[data-countdown]').on('click', '[data-countdown-start], [data-countdown-reset]', function() { 
     var $this = $(this); 
     var $wrap = $this.closest('[data-countdown]'); 
     // create instance of countdownTimer 
     var myCountdown = Object.create(countdownTimer); 

     if ($this.is('[data-countdown-start]')) { 
      $this.hide(); 
      $('[data-countdown-reset]', $wrap).css('display', 'block'); 
      myCountdown.$wrap = $wrap; 
      myCountdown.start(thisPageCountdown); 
      // myCountdown.countdownComplete = function() { 
      // alert("Updated Callback!"); 
      // }; 
     } 

     if ($this.is('[data-countdown-reset')) { 
      $this.hide(); 
      $('[data-countdown-start]', $wrap).css('display', 'block'); 

      // RESET CALLED HERE BUT DOESN'T WORK RIGHT. SAYS myCountdown.timer IS STILL null. WHY? 
      myCountdown.reset(thisPageCountdown); 
     } 

    }); 
}); 

Answer 1

當您使用var myCountdown = Object.create(countdownTimer);的點擊回調函數裏面你就劃定範圍只對回調，一旦回調執行是垃圾收集。您只需要創建countdownTimer的一個實例，它應該在您的單擊事件處理程序之外。

var thisPageCountdown = 4000; 
// create instance of countdownTimer 
var myCountdown = Object.create(countdownTimer); 

$('[data-countdown]').on('click', '[data-countdown-start], [data-countdown-reset]', function() { 
    var $this = $(this); 
    var $wrap = $this.closest('[data-countdown]'); 

Answer 2

TL; DR您可以通過避免靜態方法使用關鍵字this的解決您的問題。

當您在靜態javascript方法中使用關鍵字this時，它指向來自調用點的最後一個點之前的項目。例如：

foo.bar(); // inside, this will refer to foo 
foo.bar.foobar(); //inside, this will refer to foo.bar 
var a = foo.bar.foobar(); 
a(); //this will refer to either null or window - oops 

爲了防止這種行爲，你應該總是使用靜態方法，而不是依賴於this關鍵字完全合格的名稱引用。

reset: function (ms) { 
    //var root = this; // don't do this 
    if(countdownTimer.timer) { 
    clearInterval(countdownTimer.timer); 
    } else { 
    console.log('timer not exist!!!!'); 
    } 
    /* .... stuff ... */ 
}