setTimeout 应该触发多少次答案

【问题标题】：how many times should setTimeout firessetTimeout 应该触发多少次
【发布时间】：2016-04-21 00:25:02
【问题描述】：

我的 asp.net mvc 网站中有以下代码：-

function loadImage(src, callback) {
  var img = $('<img>').on('load', function () {
    callback.call(img);
  });

  img.attr('src', src);
  var allcaptions = $("figure span");

  // setTimeout is a hack here, since the ".placeholders" don't exist yet
  setTimeout(function () {
    alert(1);
    $(".placeholder").each(function (i) {

      // in each .placeholder, copy its caption's mark-up into it (remove the img first)
      var caption = allcaptions.eq(i).clone();
      //caption.find("img").remove();
      var t = caption.find("img").attr('data-goto');

      // caption.append($("<a />", { "text": "test", "href": t }));
      if (!(t == null || t == "undefined")) {
        caption.append("<br/>");
        caption.append("<a href='" + t + "' style='font-size:16px;font-weight:bold'>Read More</a>");
      }

      caption.find("img").remove();
      $(this).append("<div class='caption'>" + caption.html() + "</div>");
    });
  }, 500);
  alert(2)
}

现在根据我的理解，settimout 将在 500 毫秒后触发并调用该函数。但真正发生的情况如下：-

调用该函数时（显示图片库时），我会收到以下警报：-

所以任何人都可以就此提出建议，setTimeout 是如何工作的，它只会触发一次还是会执行多次？当然，我添加警报仅用于测试目的...

谢谢

【问题讨论】：

setTimeout 只在您定义的 N 毫秒后执行该函数一次。可能您的应用程序多次调用您的 loadImage 函数...
不要使用警报进行调试。使用控制台
如果你想在 n 秒后一次又一次地调用你的函数，使用setInterval

标签： javascript jquery settimeout

【解决方案1】：

        // setTimeout is a hack here, since the ".placeholders" don't exist yet

MutationObserver 这些天有wide support。

var $container = $('.container'),
  observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      var placeholders = Array.prototype.filter.call(mutation.addedNodes, function(node) {
        return node.className === 'placeholder';
      });

      if (placeholders.length > 0) console.log(placeholders);
    });
  });

observer.observe(document, {
  childList: true,
  subtree: true
});

var placeholders = setInterval(function() {
    $container.append('<p class="placeholder">Hello world</p>');
  }, 500),
  goodbyes = setInterval(function() {
    $container.append('<p class="goodbye">Goodbye world</p>')
  }, 1000);

setTimeout(function() {
  clearInterval(placeholders);
  clearInterval(goodbyes);
}, 3500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>

loadImage() 必须被多次调用。
setTimeout() 在提供的延迟后调用提供的函数，只调用一次。

【讨论】：