2015-04-05 34 views
1

通常,我通過編程將處理程序附加到DOM中的元素,這些元素依賴於稍後可能會更改的變量。如何在定義函數時捕獲外部變量的當前值

nextID = "#content-" + dataElement.elementBack; 
something.on("change", function (e) { 
    $(nextID).css({left: 0, position:'fixed', zindex: -1}); 
}); 

當這個函數被觸發時,nextID的值已經改變並作用於錯誤的元素。

有沒有一種方法可以在函數首次定義或附加到某個事件時使用變量的當前值?

(請不要建議,與其nextID,我硬編碼的元素在裏面,如果我願意,我可以。)

+0

創建一個IIFE,它將返回給你另一個函數 – mohamedrias 2015-04-05 09:28:05

回答

4

對這一問題的方法是使用自調用的函數

nextID = "#content-" + dataElement.elementBack; 

(function(nextID) { 
    something.on("change", function (e) { 
     $(nextID).css({left: 0, position:'fixed', zindex: -1}); 
    }); 
})(nextID); 

功能JavaScript創建新的範圍,既然你給nextID作爲參數,nextID被作用域,這將是捕獲並在change事件觸發時可用。

這是因爲JavaScript不會爲除函數以外的任何其他語言構造創建範圍。例如,forfor(var i = 0; i < 10; i++) {})將不會創建範圍,一旦循環結束,i在當前範圍內可用,並且將包含10

我建議你看看下一版ECMA-Script(ECMA-Script 6)的關鍵字部分let,它可以讓我們創建塊範圍的變量。

+0

很好的解釋。和瘋狂的結構。它想要弄清楚12只猴子的情節,就像彎曲我的大腦一樣。看下面的@mohamedrias解決方案,這是不同形式的相同事情嗎? – 2015-04-06 00:24:36

+0

是的,在[立即調用的函數表達式](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)上查看本文,我可以看到這些答案是相似的。但是,儘管我很欣賞你的解釋,但我很欣賞其他答案使結構保持可識別且易於閱讀的形式。 – 2015-04-06 00:32:20

+0

@WesModes它不是那麼瘋狂,12個猴子不是很難理解哈哈順便說一句,我的答案有一個主要優勢:如果你想在代碼部分添加許多事件處理程序,一個自我調用的函數就足夠了事件處理程序,而不必綁定許多自我調用的函數,並多次捕獲'nextID'。 – 2015-04-06 08:28:25

3

您可以創建一個的nextID初始值綁定到該功能的IIFE處理程序。目前我們正在創建一個閉包,其變量值的範圍是內部返回的函數。

nextID = "#content-" + dataElement.elementBack; 
something.on("change", (function(nextID) { 
    return function (e) { 
     $(nextID).css({left: 0, position:'fixed', zindex: -1}); 
     } 
    })(nextID) 
); 
+0

你能給出更多的解釋,說明這裏發生了什麼,以及爲什麼函數在聲明時捕獲變量值? – 2015-04-06 00:24:34

相關問題