setTimeout 多次执行同一个函数

Question

我有这个代码：

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 才会出现出现并被点击，这个不会出现在 DOM 中，直到 topcmm-123flashchat-main-toolbar-message-type-option 出现并被点击。

所以我写了上面的代码是为了自动依次点击元素，让它们出现在DOM中，这样问题中的功能就可以执行了。

topcmm-123flashchat-main-toolbar-message-type-option 将在页面加载后约 3 秒后自行出现，如果单击则 topcmm-123flashchat-toolbar-style-send-sound-btn 将出现，如果单击该 topcmm-123flashchat-sound-messages-contents 将出现并且功能将被执行。我还点击了 topcmm-123flashchat-send-message-panel-close-icon 以便关闭之前点击打开的面板。

这里的问题是面板一直打开，就像 elt 和 click2 被执行了很多次而 click3 似乎没有被执行一样。这是为什么？

谢谢。

Answer 1

您需要添加逻辑以防止对之前添加的元素重复相同的操作。

我添加了一个保存元素的变量。第一次看到该元素时，变量为空，因此 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
});

setTimeout 多次执行同一个函数

setTimeout keeps executing the same function many times

click

settimeout