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（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（）仅设置为最后一个时间戳？

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

因为你在每个循环中重复使用相同的img对象，所以每次循环时都会向它添加越来越多的事件监听器，因此当它加载时，它不只是调用你的循环一次，但N次。

您可能想要做的是将事件监听器的添加移动到循环外部，因此只添加一次。

您需要在您想要支持的任何旧浏览器中仔细测试此代码，因为几年前，我发现在同一load上多次触发img个事件时出现了一些可靠性问题对象

此外，您的代码中包含对_imageURL和imageURL的引用。这些应该是不同的吗？

javascript Date.now（）继续堆叠

2 个答案: