addEventListener on循環不適用於IIFE

在下面的代碼中，j的值始終設置爲迭代的最後一個。我已經使用了一個IIFE，但它仍然給出了預期的行爲。有什麼我做錯了嗎？addEventListener on循環不適用於IIFE

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

你沒有將'j'傳遞給IIFE。在循環中創建函數也被認爲是不好的做法。改用外部功能。請參閱http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – Teemu

你想關閉做的，是將迭代變量作爲參數傳遞，因爲這樣的：

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

或在評論@torazaburo相當注意，您可以使用關鍵字let用於迭代變量以消除創建閉包的需要。更多關於let的關鍵字你可以找到here。但請注意，這是ES6功能，這在舊版瀏覽器中未實現，因此您可能需要先將其傳輸（例如使用babel）。

來源

2017-01-16 18:35:16

爲什麼選擇downvoted？ –

因爲根本就不需要關閉，因爲整個問題都可以用'for ...'來解決。 – 2017-01-16 19:51:49

當然，但問題是「我有什麼做錯了嗎？」。回答說在提供的代碼中出了什麼問題 –

addEventListener on循環不適用於IIFE

回答

相關問題