如何设置延迟

我有这行代码：如何设置延迟

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

而且它激发权当加载页面时，然而这会导致“无法设置的未定义或为空引用属性”的错误。据我所知，这可能会发生，因为.theclass还没有，因此脚本无法定位它。

有没有简单的方法，使用JavaScript来简单地为这行代码设置一个延迟，但它会自动继续触发，就像它在页面加载时那样？

来源

2016-04-07 yupowahe

将您'script'为一体的''你 – Rayon

意味着在文档的末尾'最后child'？是的，试过了。加载页面后，会出现'.theclass'（它异步加载） – yupowahe

使用MutationObserver查看加载元素的时间，然后更新内容 –

尝试使用

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

编辑：的异步加载，你可以使用jQuery

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

来源

2016-04-07 05:35:22

试过这个。 '.theclass'在页面加载后出现（它异步加载） – yupowahe

@yupowahe编辑我的答案 –

一种选择是使用一个MutationObserver来监听元素的添加以及添加我们的目标元素我们可以更新它并删除观察者

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>

来源

2016-04-07 06:05:58

如何设置延迟

回答

相关问题