addEventListener创建了一个无限循环

addEventListener Created an Infinite Loop

本文关键字：一个 无限循环 创建 addEventListener      更新时间：2023-09-26

我添加了一个事件侦听器，它创建了一个无限循环，我真的不明白我做错了什么。

发生的事情是它自己不断点击图像

这是我的代码：

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]];
};

希望有人能发现我的错误。。谢谢

  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);
    }
}

一个问题似乎是您没有正确使用回调。

回调必须是函数对象，并且不能按预期返回。

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

请尝试返回一个匿名函数。

最好看看你是如何调用这些函数的，但我注意到这一行：

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

您正在调用函数x，而不是将其指定为事件侦听器。由于该函数向页面添加了一个图像，因此循环永远不会完成，因为它会遍历页面上的所有图像。这行应该是：

images[i].addEventListener("click", x , false );
相关文章：