加載事件的方式太頻繁

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.