IIFE는 빠른 루프에서 이벤트 리스너의 한계를 극복하는 데 어떻게 도움이 됩니까?

클로저를 사용하여 빠른 루프에서 EventListener의 한계 극복

과제:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!