「類」繼續工作而不被全球

引用我做的圖像滑塊「類」，最初實例化它：「類」繼續工作而不被全球

var foo = new Slider(document.getElementById("featuredSlider"), 900);

我試圖消除var foo =並繼續工作，這是令人驚訝的對我。是什麼讓它繼續工作？不全球參考它是一個壞主意？

請注意，"featuredSlider"是<div>標籤的id。它包含一些<a>標籤，每個標籤包含<img>標籤。

function Slider(inElement, inStep) { 
    if (!inElement) return; 

    this.element = inElement; 
    this.start = 0; 
    this.end = 0; 

    var self = this; 
    var limit = inElement.getElementsByTagName("a").length*inStep; 
    setInterval(function() { 
     self.start = self.end; 
     self.end = (self.end+inStep)%limit; 
     self.animate(this.start < this.end ? 1 : -1); 
    }, 3000); 
} 

Slider.prototype.animate = function(inZeno) { 
    this.start += ((this.end-this.start)>>2)+inZeno; 
    this.element.style.left = this.start+"px"; 

    if (this.start !== this.end) { 
     var self = this; 
     setTimeout(function() { 
      self.animate(self.start < self.end ? 1 : -1); 
     }, 33); 
    } 
} 

//new Slider(document.getElementById("featuredSlider"), 900); 
var foo = new Slider(document.getElementById("featuredSlider"), 900);

來源

2014-07-18 asimes

我試圖消除無功富=並繼續工作，這是令人驚訝的對我。是什麼讓它繼續工作？

因爲對它的引用由定時器系統保持，因爲它的設置，其經由setInterval和setTimeout引用它回調函數（閉包）。因此，只要這些定時器仍然保留，參考它的必要部分就會保留。

它給人以setInterval這裏的功能：

setInterval(function() { 
    self.start = self.end; 
    self.end = (self.end+inStep)%limit; 
    self.animate(this.start < this.end ? 1 : -1); 
}, 3000);

是關閉在調用Slider。因此，只要閉合（函數）在附近，閉合中的範圍內的所有東西都會保持。由於該定時器從未被取消，定時器系統保持這些參考存活。（如果「封閉」不熟悉或者只是稍微熟悉，請不要擔心：Closures are not complicated。）

不全面地引用它是一個壞主意嗎？

不，這很好。如果它繼續工作，並且不需要參考，則不需要存儲參考。當很多人使用script.aculo.us時，這種情況非常普遍，大約有一半的效果使用了new。

來源

2014-07-18 20:39:27

你能解釋一下「附加到'div'」嗎？我從來沒有聽說過這樣的事情 – asimes

@asimes：在div上設置事件處理程序，在div上設置數據屬性等。例如：'var self = this; div.addEventListener（「click」，function（）{self.doSomething（）;}，false）;'現在'div'有'self'的引用，它是'this'，並且對象保持爲只要'div'有這個參考。 –

@PatrickEvans：是的，謝謝。我不得不承認，我認爲代碼塊是OP *使用滑塊，而不是滑塊的代碼。固定。 –

「類」繼續工作而不被全球

回答

相關問題