jQuery構件工廠_destroy方法

Question

我想創建一個計時器小部件，可以用幾秒鐘初始化，然後通過使用新的'秒數'進行倒計時從而在任何時候重置。到目前爲止，我有這個創建定時器罰款和倒計時。

我想要做的是在_create方法內首先調用_destroy方法，以刪除已經在元素上的定時器，並且還使用window.clearInterval來停止重新添加的定時器。 this.interval在_start方法中設置，然後在_destroy方法中引用，但我認爲問題在於this.interval的範圍。

這是我到目前爲止，但我的_destroy方法似乎並沒有清除間隔，我不明白爲什麼。

$.widget('time.countdown', { 

    options : { 
     remaining : (2 * 24 * 60 * 60 * 1000), 
     updatefreq: 1000 
    }, 

    _create : function() { 
     'use strict'; 
     this._destroy(); 
    }, 

    _start: function() { 
     'use strict'; 
     var secs = this.options.remaining; 

     this.interval = window.setInterval((function (elem, secs) { 

      return function() { 

       secs -= 1; 

       var days  = Math.floor(secs/(24 * 60 * 60)), 
        div_hr = secs % (24 * 60 * 60), 
        hours = Math.floor(div_hr/(60 * 60)), 
        div_min = secs % (60 * 60), 
        minutes = Math.floor(div_min/60), 
        div_secs = div_min % 60, 
        seconds = Math.ceil(div_secs), 
        time_parts = { 
         "d": days, 
         "h": hours, 
         "m": minutes, 
         "s": seconds 
        }, 
        tstring = '', 
        c; 

       for (c in time_parts) { 
        if (time_parts.hasOwnProperty(c)) { 
         tstring += time_parts[c] + c + ' '; 
        } 
       } 

       elem.html(tstring); 
      }; 

     }(this.element, secs)), this.options.updatefreq); 
    }, 

    _destroy: function() { 
     'use strict'; 
     if (this.interval !== undefined) { 
      window.clearInterval(this.interval); 
     } 
     this.element.html(''); 
    } 

}); 

任何人都可以對此有所瞭解嗎？

Answer 1

你的代碼奇怪的是，沒有調用「私人」_start()函數，但nvm。

您應該添加一個公共reset()功能：

• 設置新remaining值，
• clearInterval，
• 然後調用_start()功能

你應該再調用這個reset()功能在需要時。在此代碼，並在下面解釋一下：

(function($) { 

    $.widget('time.countdown', { 

     options : { 
      remaining : (2 * 24 * 60 * 60 * 1000), 
      updatefreq: 1000 
     }, 

     _create : function() { 
      'use strict'; 
      this._start(); 
     }, 

     _setOption: function(key, value) { 
      key == 'remaining' ? 
       this.reset(value) : 
       this._super(key, value); 
     }, 

     _start: function() { 
      'use strict'; 
      // your countdown code 
     }, 

     reset: function(remaining) { 
      // You should perform some checks on the given value 
      this.options.remaining = remaining; 
      this._destroy(); 
      this._start(); 
     }, 

     _destroy: function() { 
      'use strict'; 
      if (this.interval !== undefined) 
       window.clearInterval(this.interval); 
      this.element.html(''); 
     } 
    }); 

})(jQuery); 

注意，_create()函數被調用一次，在創建時。因此，如果您在同一元素上多次應用插件而沒有像$('#timer').countdown();這樣的參數，那麼_start()將只會被調用一次（在第一次調用時）。

您可以用一個新值型動物的方式，現在重新設置倒計時：

// new value to set = 3600 

// Call to the "public" `reset()` function 
$('#timer').countdown('reset', 3600); 

// Call to the `_setOption()` 
$('#timer').countdown({remaining: 3600}); 

// Call to the `_setOption()` 
$('#timer').countdown('option', 'remaining', 3600);