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中文网其他相关文章！