繁体   English   中英

addEventListener创建了一个无限循环

[英]addEventListener Created an Infinite Loop

我添加了一个事件监听器,它创建了一个无限循环,我真的不知道我做错了什么。

它会不断地单击图像

这是我的代码:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM