加载事件的方式太频繁

Question

我想重新加载图像，一旦它被加载。这里是我的代码：

$(function() { 
    function reload() { 
     console.log('Inside reload'); 
     var srcImage = 'http://cam2.camvine.com/axis-cgi/jpg/image.cgi?resolution=320x240' + '&d=' + (new Date()).getTime(); 

     $('img') 
      .attr('src', srcImage) 
      .load(function() { 
       setTimeout(reload, 500); 
      }) 
      .error(function() { 
       setTimeout(reload, 1000); 
      }); 
    } 

    reload(); 
}); 

出于某种原因，load事件被调用数千次每秒，最终冻结我的浏览器。 Here是一个小提琴。我究竟做错了什么？

Answer 1

随着每一个reload要添加新的负载事件处理程序已经存在一。

$(function() { 
    function reload(first_run) { 
     console.log('Inside reload'); 
     var srcImage = 'http://cam2.camvine.com/axis-cgi/jpg/image.cgi?resolution=320x240&d=' + (+new Date()), 
      img = $('img'); 

     if (first_run === true) { 
      img.load(function() { 
       setTimeout(reload, 500); 
      }); 
     } 
     img.attr('src', srcImage); 
    } 

    reload(true); 
}); 

Answer 2

问题是，您在每次迭代时都向该元素添加另一个“加载”处理程序。因此，每个“加载”事件将导致全部调用处理程序。他们会增加更多处理程序，并在一段时间后，会有很多。

你可以取消绑定处理程序，否则就这么走了，并检查其存在莫名其妙：

function reload() { 
    console.log('Inside reload'); 
    var srcImage = 'http://cam2.camvine.com/axis-cgi/jpg/image.cgi?resolution=320x240' + '&d=' + (new Date()).getTime(); 

    var $img = $('img'); 
    $img 
     .attr('src', srcImage); 

    if (!$img.hasClass('load-ready')) 
     $img 
     .addClass('load-ready') 
     .load(function() { 
      setTimeout(reload, 500); 
     }) 
     .error(function() { 
      setTimeout(reload, 1000); 
     }); 
} 

Here is your jsfiddle, updated.