我试图通过控制台添加一个按钮上的点击，我在这里使用setInterval，如果我清除间隔按钮，它只在第一次工作，所以我试图不清除间隔，它的工作，但它会影响页面。
var chatInterval=setInterval(()=>{
if( document.getElementById('chat-widget-minimized')){
clearInterval(chatInterval);
var frame = document.getElementById('chat-widget-minimized');
var c = frame.contentDocument || frame.contentWindow.document;
c.querySelectorAll('button[aria-label="Open LiveChat chat widget"]')[0].onclick=function(){
_satellite.track('Chat_Click');
}
}
},200)实际上，按钮正在删除并再次添加，它不稳定，这就是使用设置间隔的原因
var chatInterval=setInterval(()=>{
if( document.getElementById('chat-widget-minimized')){
//clearInterval(chatInterval); with out clear interval
var frame = document.getElementById('chat-widget-minimized');
var c = frame.contentDocument || frame.contentWindow.document;
c.querySelectorAll('button[aria-label="Open LiveChat chat widget"]')[0].onclick=function(){
_satellite.track('Chat_Click');
}
}
},200)
1条答案
按热度按时间mw3dktmi1#
建议不要在不清除间隔的情况下使用
setInterval，因为这可能会导致页的性能问题。使用setInterval时，回调函数会以指定的间隔重复执行，如果不清除间隔，它将无限期地继续运行。这可能会导致页无响应或变慢，特别是在回调函数占用大量资源的情况下。除了使用
setInterval而不清除间隔之外，您还可以使用不同的方法来实现相同的结果。一个选项是在执行回调函数之前使用setTimeout设置延迟，然后在执行回调函数之后再次使用setTimeout设置新的延迟。这将允许您实现与setInterval类似的效果。但没有潜在的性能问题。在本例中，checkButton函数在页面加载时立即被调用，它检查ID为chat-widget-minimized的button元素是否存在。如果找到该元素，它将为该按钮设置onclick事件处理程序。如果未找到该元素，它将使用setTimeout设置200毫秒的延迟，然后再次调用自身。此过程将一直持续到找到该元素为止。此时将设置onclick事件处理程序，并且不会再次调用checkButton函数。