addEventListener創建了一個無限循環

Question

我添加了一個事件監聽器，它創建了一個無限循環，我真的不知道我做錯了什么。

它會不斷地單擊圖像

這是我的代碼：

function attachOnClickEvent(cases,theme,debut,capture){
    var images=document.getElementsByTagName('img');
    for(var i=0;i<images.length;i++){
        images[i].addEventListener("click",x(cases,theme,debut,capture),false);
    }
};

var x=function(cases,theme,debut,capture){newImage(this,cases,theme,debut,capture);};

function newImage(elem,cases,theme,debut,capture){
    var images=preloadImages(cases,theme);
    var imgTab=document.getElementsByTagName('img');
    var Id=elem.id;
    elem.src=images[randomTab[Id]];

}; 

希望有人能找到我的錯誤..謝謝！

Answer 1

1. getElementsByTagName返回一個實時NodeList
2. 您每次調用函數 x而不是將其添加為處理程序
3. 創建了一個新的<img>
4. NodeList的長度增加了1
5. 下一次迭代與前一次迭代的距離與前一次相同

有兩件事你需要考慮，首先，正如我在2提到的那樣，當你沒有意義時，你正在調用x 。 其次，您可以通過向下循環來避免實時列表的一些問題

---

獲得所需結果的一個方法是重寫像這樣的attachOnClickEvent

function attachOnClickEvent(cases, theme, debut, capture) {
    var images = document.getElementsByTagName('img'),
        handler = function (e) {
            return x(cases, theme, debut, capture);
        },
        i;
    for (i = images.length - 1; i >= 0; --i) {
        images[i].addEventListener("click", handler, false);
    }
}

Answer 2

一個問題似乎是您沒有正確使用回調。

回調需要是函數對象，不能按照您的意圖返回。

function (cases, theme, debut, capture) {
    return function() { newImage(this, cases, theme, debut, capture); };
}

嘗試返回匿名函數。

Answer 3

會更好地了解你如何調用這些函數，但我注意到這一行：

images[i].addEventListener("click",x(cases,theme,debut,capture),false);

您正在調用函數x ，而不是將其指定為事件偵聽器。 由於該函數會向頁面添加圖像，因此循環永遠不會完成，因為它會遍歷頁面上的所有圖像。 這一行應該是：

images[i].addEventListener("click", x , false );