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);
});

该代码应该执行某些功能（为了方便起见，此处未包括）在DOM中出现topcmm-123flashchat-sound-messages-contents之前无法执行，直到topcmm-123flashchat-toolbar-style-send-sound-btn出现并被单击后，该功能才会出现，并且直到topcmm-123flashchat-main-toolbar-message-type-option出现并被点击时，该内容才会出现在DOM中。

因此，我编写了上面的代码，以便依次自动单击元素并将它们显示在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可以多次执行相同的功能

1 个答案: