setTimeout会多次执行相同的函数
我有这样的代码：
document.addEventListener("DOMContentLoaded", function(event) {
// Select the node that will be observed for mutations
var parentOfMyList = document.body;
// Options for the observer (which mutations to observe)
var config = {
attributes: true,
childList: true,
subtree: true
};
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for (var mutation of mutationsList) {
if (mutation.type == 'childList') {
if (document.getElementById("topcmm-123flashchat-main-toolbar-message-type-option") != null) {
var elt = document.getElementById("topcmm-123flashchat-main-toolbar-message-type-option");
setTimeout(elt.click.bind(elt), 2000);
if (document.getElementById("topcmm-123flashchat-toolbar-style-send-sound-btn") != null) {
var clic2 = document.getElementById("topcmm-123flashchat-toolbar-style-send-sound-btn");
setTimeout(clic2.click.bind(clic2), 2100);
if (document.getElementById("topcmm-123flashchat-send-message-panel-close-icon") != null) {
var clic3 = document.getElementById("topcmm-123flashchat-send-message-panel-close-icon");
setTimeout(clic3.click.bind(clic3), 2200);
//execute some function
}
}
}
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
observer.observe(parentOfMyList, config);
});
代码应该执行一些函数(为了方便起见没有包含在这里)，这些函数只有在topcmm-123flashchat-sound-messages-contents出现在DOM中才能执行，只有当topcmm-123flashchat-toolbar-style-send-sound-btn出现并被单击时，它才会出现，而这个函数在topcmm-123flashchat-main-toolbar-message-type-option出现并被单击之前也不会出现在DOM中。
因此，我编写了上面的代码，以便自动逐个单击元素，并让它们出现在DOM中，这样就可以执行问题中的函数。
页面加载后大约3秒，topcmm-123flashchat-main-toolbar-message-type-option将自动出现，如果单击，则会出现topcmm-123flashchat-toolbar-style-send-sound-btn；如果单击该页面，则会出现topcmm-123flashchat-sound-messages-contents，并将执行该函数。另外，我还单击了topcmm-123flashchat-send-message-panel-close-icon，以便关闭之前单击时打开的面板。
这里的问题是，如果elt和click2被多次执行，而click3似乎没有被执行，面板就会一直打开。为什么会这样呢？
谢谢。
回答 1
Stack Overflow用户
发布于 2018-07-23 22:39:29
您需要添加逻辑，以防止对先前添加的元素重复相同的操作。
我添加了一个保存元素的变量。第一次看到元素时，变量为空，因此运行if代码。它在以后的运行中会被跳过。
document.addEventListener("DOMContentLoaded", function(event) {
// Select the node that will be observed for mutations
var parentOfMyList = document.body;
// Options for the observer (which mutations to observe)
var config = {
attributes: true,
childList: true,
subtree: true
};
var elt = null,
clic2 = null,
clic3 = null;
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for (var mutation of mutationsList) {
if (mutation.type == 'childList') {
if (!elt && (elt = document.getElementById("topcmm-123flashchat-main-toolbar-message-type-option"))) {
setTimeout(elt.click.bind(elt), 2000);
}
if (!clic2 && (clic2 = document.getElementById("topcmm-123flashchat-toolbar-style-send-sound-btn"))) {
setTimeout(clic2.click.bind(clic2), 2100);
}
if (!clic3 && (clic3 = document.getElementById("topcmm-123flashchat-send-message-panel-close-icon"))) {
setTimeout(clic3.click.bind(clic3), 2200);
}
}
break;
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
observer.observe(parentOfMyList, config);
// other code can go here
});
https://stackoverflow.com/questions/51468755
复制相似问题
腾讯云开发者
