javascript Date.now（）繼續堆棧

我想從ipCamera得到最後一張照片，我的功能是這樣的。基本上，一個圖像加載完成後。然後立即啓動循環（）。我不喜歡使用AJAX。javascript Date.now（）繼續堆棧

var toggle= function(_imageUrl ) { //refresh include and adjust 
     var img = document.getElementById('image'); 

     var updater = function(){ 
      var time = Date.now(); 

      var loop = function() { 
      ImageURL = _imageUrl + '&' + time; 
      console.log(time) 
      img.setAttribute("src", imageURL); 
      ImageURL = ''; //set the image.src to empty 
      img.addEventListener('load', function() { 
       setTimeout(updater ,100) 
      }, false); 
      }; 
      loop(); 
     } 
     updater(); 
    };

這個函數工作正常，但顯然，Date.now（）繼續按每個加載時間進行堆棧。這是console.log（time）的結果;

First Loop: 
    1417935798237 
Second loop: 
    1417935798237 
    1417935798925 
ThirdLoop (as it took longer to load), thus the time stack more 
    1417935798925 
    1417935800057 
    1417935800057 
    1417935801226 
    1417935801227 
    1417935801228 
    1417935801228

功能，由各個循環，使最後的圖像，最終它還是傳遞的最後一個圖像之前評估更多項目，但到了20環。該列表是巨大的

問題：
1.發生了什麼事？
2.如何將Date.now（）只設置爲最後一個時間戳？

來源

2014-12-07 vdj4y

每次撥打電話loop時，由於撥打img.addEventListener而增加了另一個事件監聽器。當圖像的url更改（導致瀏覽器重新加載圖像）時，您的eventListener將被調用。該eventListener應該只添加一次。移動loop函數的外部。

var toggle= function(_imageUrl ) { //refresh include and adjust 
      var img = document.getElementById('image'); 

      img.addEventListener('load', function() { 
      setTimeout(loop ,100) 
      }, false); 

      var loop = function() { 
      var time = Date.now(); 
      imageURL = _imageUrl + '&' + time; 
      console.log(time) 
      img.setAttribute("src", imageURL); 
      imageURL = ''; //set the image.src to empty 

      }; 
      loop(); 
    };

來源

2014-12-07 07:35:19 Alex

因爲要重複使用在每個循環相同img對象，則保留每個循環一次添加越來越多的事件監聽器，並因此在加載時，它不只是打電話給你的一次循環，但N次。

您可能想要做的事是將事件偵聽器的添加移動到循環外，以便只添加一次。

您將不得不在任何想要支持的舊版瀏覽器中仔細測試此代碼，因爲幾年前，我發現在同一個img對象上觸發load事件多次發生一些可靠性問題。

另外，您在代碼中也參考了_imageURL和imageURL。那些應該是不同的？

來源

2014-12-07 07:30:21 jfriend00

該OP也可以創建函數作爲函數聲明，然後通過引用進行分配，無論通過addEventListener *分配多少次，它都應該只添加一次。但把這個任務放在循環之外更好。 ;-) – RobG 2014-12-07 07:40:11

我創建ImageUrl，並將其設置爲在src = ImageUrl之後立即清空，以防止進一步下載。 – vdj4y 2014-12-07 07:55:48

@ jfriend00我真誠地道歉，我很困惑，因爲我的console.log是混合的，但下面Alex的答案是正確的。 – vdj4y 2014-12-07 08:30:01

javascript Date.now（）繼續堆棧

回答

相關問題