Question

我有一个页面，其中实时显示带有图像的事件流。由于它是实时的（当事件发生时），图像可能还没有完全可用，因为它仍然被上传到存储。

每隔几秒钟就会执行一次新事件调用，每次调用最多可以返回20个事件（最新的20个），但通常在0到5之间。

由于最初可能无法加载图像的问题，因此使用<img onerror="retryImage(this, 'imageUrl', 0)" src="imageUrl" /> function retryImage(source, url, attempts) { img = new Image(); img.src = url + '?' + (new Date()).getTime(); img.onload = function() { source.src = img.src; }; img.onerror = function() { if (attempts > 4) { source.src = 'not_found.png'; } else { source.src = 'loading.gif'; attempts++; $(this).delay(2000).queue(function() { retryImage(source, url, attempts); $(this).dequeue(); }); } }; return true; }函数：

delay()

想法是尝试加载图像，如果失败，请等待几秒钟再试一次，最多5次。

不幸的是，在实践中偶尔（当许多图像最初无法同时加载时），所显示的图像之一将属于不同的事件。这让我觉得我在滥用queue()和"select * from data WHERE TEXT RLIKE '[[:<:]]digital[[:>:]]' OR TEXT RLIKE '[[:<:]]data[[:>:]]' OR TEXT RLIKE '[[:<:]]agile[[:>:]]' OR (TEXT RLIKE '[[:<:]]self[[:>:]]' AND TEXT RLIKE '[[:<:]]service[[:>:]]') OR TEXT RLIKE '[[:<:]]cloud[[:>:]]' OR TEXT RLIKE '[[:<:]]insight[^[:space:]]+[[:>:]]' OR TEXT RLIKE '[[:<:]]modern[^[:space:]]+[[:>:]]'")函数？

有什么想法吗？

Answer 1

你确实是; delay和queue专门用于jQuery效果。引自the documentation：

.delay()方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 例如，它没有提供一种方法取消延迟 - .delay()不能替代JavaScript的原生代码 setTimeout功能，可能更适合某些用途例。

我相信这正是这样一个用例！尝试类似：

function retryImage(source, url, attempts) {
  img = new Image();
  img.src = url + '?' + (new Date()).getTime();
  img.onload = function () {
    source.src = img.src;
  };
  img.onerror = function () {
    if (attempts > 4) {
      source.src = 'not_found.png';
    } else {
      source.src = 'loading.gif';
      attempts++;
      setTimeout(function () {
        retryImage(source, url, attempts);
      }, 2000);
    }
  };
  return true;
}

JQuery延迟了+排队的调用

1 个答案: