如何设置延迟

How to set delay

本文关键字：延迟 设置 何设置      更新时间：2024-02-21

我有这行代码：

document.querySelector(".theclass").outerHTML = "The outerHTML";

它在加载页面时立即启动，但这会导致"无法设置未定义或null引用的属性"错误。据我所知，这可能是因为.theclass还没有出现，因此脚本无法针对它

有没有一种简单的方法，使用JavaScript只需为这行代码设置一个延迟，但它会像加载页面时那样继续自动启动？

尝试使用

document.onload=function(){
   document.querySelector(".theclass").outerHTML = "The outerHTML";
};

EDIT:对于异步加载，您可以使用jQUery

$(document).on('DOMNodeInserted', function(e) {
    if ($(e.target).is('.theclass')) {
       document.querySelector(".theclass").outerHTML = "The outerHTML";
    }
});

一个选项是使用MutationObserver来侦听元素添加，当添加目标元素时，我们可以更新它并删除observer

setTimeout(function() {
  document.getElementById('parentelement').innerHTML = '<span class="theclass">theclass</span>';
}, 500);
// select the target node
var target = document.querySelector('#parentelement');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type, mutation);
    Array.from(mutation.addedNodes).forEach(function(el) {
      if (el.classList.contains('theclass')) {
        el.outerHTML = "The outerHTML";
        observer.disconnect();
      }
    });
  });
});
var config = {
  childList: true
};
observer.observe(target, config);
<div id="parentelement"></div>

相关文章：