javascript Date.now() 계속 스택

Question

마지막 사진을 ipCamera에서 가져오고 싶습니다. 내 기능은 다음과 같습니다. 기본적으로 하나의 이미지로드 후에 루프를 즉시 시작하십시오. 나는 AJAX를 사용하지 않는 것을 선호한다.

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 (시간)의 결과입니다.

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()를 마지막 타임 스탬프로 설정하는 방법은 무엇입니까? 각 루프에서 같은 img 개체를 재사용하기 때문에

Answer 1

loop을 호출 할 때마다 img.addEventListener 호출로 인해 다른 eventListener가 추가됩니다. 이미지의 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(); 
    }; 

Answer 2

, 당신은 루프를 통해 각 시간을 더 많은 이벤트 리스너를 추가 계속하고로드 할 때 따라서, 그냥 한 번 루프를 호출하지 않지만, N 시간.

아마도 이벤트 리스너를 루프 바깥으로 이동 시켜서 한 번만 추가하면됩니다.

몇 년 전만해도 동일한 img 개체에서 load 이벤트를 두 번 이상 트리거 할 때 안정성 문제가 발견되어 지원을 원하는 브라우저에서이 코드를 신중하게 테스트해야합니다.

또한 코드에 _imageURL 및 imageURL이라는 참조가 있습니다. 그것들은 다른 것으로 생각하고 있습니까?