应该有多少次的setTimeout火灾

Question

我有我的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毫秒，并会调用该函数。但到底发生了什么情况如下： -

当函数被调用（显示图片库时），我会收到以下提示： -

2 
1 
2 
2 
1 
1 

所以可以在此请，请问有人建议setTimeout的作品只会触发一次或执行多次？当然我添加仅用于测试目的的警报......

感谢

Answer 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()在提供的延迟后调用提供的功能，只需一次。