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

Возможно, проблема в том, что вы неправильно используете обратные вызовы.

Обратные вызовы должны быть функциональными объектами и не могут быть возвращены по мере того, как вы собираетесь.

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

Попробуйте вернуть анонимную функцию.

Answer 2

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 3

Было бы лучше, чтобы увидеть, как вы называть эти функции, но я заметил, что на этой линии:

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

Вы вызываете вашу функцию x, а не назначая его как событие л istener. Поскольку эта функция добавляет изображение на страницу, цикл никогда не завершается, так как он выполняет итерацию по всем изображениям на странице. Эта строка должна быть следующей:

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