比使用`setTimeout`和`.length`更好的方法来检查元素是否存在

Question

目前我有一个函数，它可以在动态生成元素后单击该元素，但问题在于我正在使用类似以下代码的东西：

if($('#element').length){
  $('#element').click();
} else {
  setTimeout(function(){
  $('#element').click();
  }, 500);
}

我会反复调用此函数直到元素出现。 是否有更好的方法来检查元素是否出现？ 我尝试使用循环，但最终只是让浏览器崩溃了。

- Operter

---

触发使元素出现的代码。（你能发布那个代码吗？） - CertainPerformance

这是来自Facebook Messenger的图片，我正在编写一个jQuery脚本，以便自动下载它们（这是工作需要，没有什么奇怪的）。有些图片加载需要更长时间，这就是为什么我需要不断检查并遍历DOM到下一个图片的原因。 - Operter

Answer 1

您可以利用 Mutation Observer API 来检查元素何时被添加。

var callback = function(mutations) {
// check the mutations and perform whatever you wish to do
}
var observer = new MutationObserver(callback);
// provide the node that you wish to observe for mutations and the configuration to use
observer.observe(<targetNode>, <config>);
...
...
observer.disconnect();

编辑：添加了一个示例fiddle，其中每个动态添加的段落在添加到DOM时都会被作为警报回显。

jsFiddle - 使用Mutation Observer API回显动态添加的段落

- aghashamim

---

这是朝着正确的方向发展，但您应该改进示例，使其适合Ops用例。 - Jonas Wilms

@JonasW。已更新答案并附上示例。 - aghashamim

Answer 2

jQuery有一个.load()事件，当元素和所有子元素完全加载时调用。

$( "#element" ).load(function() {
  // is completely loaded
});

点击这里查看更多信息。

注意：此事件可发送到与URL相关联的任何元素：图像、脚本、框架、iframe和窗口对象。

如果该元素未与上述任何元素相关联，则应在dom .ready() event时加载。

- V. Sambor