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

getElementsByTagName正在返回实时 NodeList
您每次都在调用函数 x，而不是将其添加为处理程序
创建了新的<img>
NodeList 的长度增加1
下一次迭代与前一次迭代的距离与前一次相同

您需要考虑两件事情，首先，正如我在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 );

addEventListener创建了一个无限循环

3 个答案: