루프에서 addEventListener가 IIFE와 작동하지 않음

아래 코드에서 j의 값은 항상 마지막 반복으로 설정됩니다. 이미 IIFE를 사용하고 있지만 여전히 예상치 못한 동작을 제공합니다. 내가 잘못하고 있는게 있나요?루프에서 addEventListener가 IIFE와 작동하지 않음

(function(j) { 
    deleteButton.addEventListener('click',function() { 
      console.log(j); // j is the parameter 
    }); 
})(j);

또는 상당히 코멘트에 주목 @torazaburo, 당신은 let 키워드를 사용할 수 있습니다 : 당신이 폐쇄와 함께 수행 할 작업을

function renderUsers(users) { 
    const frag = document.createDocumentFragment(); 
    const userList = document.getElementById('user-list'); 

    // Create and append all the users on the user list 
    for (var j = 0; j < users.length; j++) { 
     var item = document.createElement('li'); 
     var division = document.createElement('div'); 
     var userName = document.createElement('span'); 
     var deleteButtonAnchor = document.createElement('a'); 
     var deleteButton = document.createElement('i'); 
     deleteButton.classList.add('material-icons'); 
     deleteButton.textContent = 'delete_forever'; 
     (function() { 
      deleteButton.addEventListener('click',function() { 
       console.log(j); 
      }); 
     })(); 
     deleteButtonAnchor.appendChild(deleteButton); 
     division.appendChild(userName); 
     division.appendChild(deleteButtonAnchor); 
     item.appendChild(division); 


     userName.appendChild(document.createTextNode(users[j].name.first+' '+users[j].name.last)); 
     frag.appendChild(item); 
    } 
    userList.appendChild(frag); 
}

출처

2017-01-16 Chittolina

IIFE에'j '를 전달하지 않습니다. 루프에서 함수를 만드는 것은 나쁜 습관으로 간주됩니다. 대신 외부 함수를 사용하십시오. http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – Teemu

는, 같은 매개 변수로 반복 변수를 전달하는 것입니다 클로저를 만들 필요가 없도록 반복 변수를 지정합니다. let 키워드에 대한 자세한 내용은 here입니다. 그러나 이전 브라우저에는 구현되지 않은 ES6 기능이기 때문에 먼저 브라우저를 사용해야합니다 (예 : 바벨 사용).

출처

2017-01-16 18:35:16

왜 downvoted를 참조하십시오? –

왜냐하면 전체 문제는'for (let ...')로 해결할 수 있기 때문에 여기서는 닫을 필요가 없기 때문입니다. –

물론, "내가 잘못하고있는 것이 있습니까?" 대답은 제공된 코드에서 무엇이 잘못되었는지를 알려줍니다 –

루프에서 addEventListener가 IIFE와 작동하지 않음

답변

관련 문제