сколько раз 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() вызывает предоставленную функцию после предусмотренной задержки только один раз.