IIFE 如何協助克服快速循環中事件偵聽器的限制？

使用閉包克服快速循環中事件監聽器的限制

挑戰：
經常使用for 循環向多個物件添加事件監聽器導致所有偵聽器都針對JavaScript 中的相同物件。發生這種情況是由於閉包的作用域所致。

解：
要解決此問題，請在循環內使用 立即呼叫函數表達式 (IIFE)。這會為每次迭代建立一個新的作用域，從而允許正確引用變數。

範例：

// Function to run on click:
function makeItHappen(elem, elem2) {
    var el = document.getElementById(elem);
    el.style.backgroundColor = "red";
    var el2 = document.getElementById(elem2);
    el2.style.backgroundColor = "blue";
}

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
    // IIFE to create a new scope for each iteration
    (function () {
        var k = i + 1;
        var boxa = elem[i].parentNode.id;
        var boxb = elem[k].parentNode.id;
        elem[i].addEventListener("click", function() { makeItHappen(boxa,boxb); }, false);
        elem[k].addEventListener("click", function() { makeItHappen(boxb,boxa); }, false);
    }()); // immediate invocation
}

解釋：
在此程式碼中，IIFE 用於為每次迭代建立一個新範圍。這確保了變數 boxa 和 boxb 被正確引用，並且事件偵聽器被指派給適當的容器元素。

關鍵見解：
在使用循環時，閉包在 JavaScript 中至關重要涉及傳遞值。透過使用 IIFE 建立新作用域，您可以防止與閉包相關的問題，確保您的程式碼能如預期運作。

以上是IIFE 如何協助克服快速循環中事件偵聽器的限制？的詳細內容。更多資訊請關注PHP中文網其他相關文章！