Javascript 如何将MutationObserver插入jQuery代码

我对jQuery比较陌生

编辑问题： 因此，我没有使用setInterval每400ms运行一次代码，而是得到了一个提示，MutationObserver将是一个更好的解决方案。我现在已经在网上读过了，我了解它是如何工作的，但是我没有足够的经验将它实现到我的代码中。有人愿意帮忙吗？对我来说，在实践中更容易看到它，所以下次我可以自己做

代码如下：

$(document).ready(function() {
    const numbersToCheck = ['207747', '207746', '207743', '207742', '207739', '207741', '207744', '215364', '215371', '215406', '215405', '215366', '215365', '239511', '239512', '239513'];
    $('.mini-product').each((index, mp) => {
      let productNumber = $(mp).find('.product-number').first().text().trim();
      if (numbersToCheck.includes(productNumber)) {
        $(mp).find('.checkout-spacing').each((csi, cs) => {
          $(cs).css('display', 'none');
        });
      }
    });
});

以下是我发现并阅读的有关MutationObserver的内容：

---

如果您想继续检查该情况，只需卸下该零件即可

if (yourCodeHasBeenExecuted === true) {
    window.clearInterval(timer);
}

---

如果变量

YourCodeHasExecuted

将设置为true，则这将清除间隔（停止检查）。如果要继续检查该条件，可以删除此部分

if (yourCodeHasBeenExecuted === true) {
    window.clearInterval(timer);
}

---

如果变量

YourCodeHasExecuted

将设置为true，则这将清除间隔（停止检查）

如何实现MutationObserver（）的工作示例：

---

有关此参数和其他参数的更多详细信息，请查看文档。

如何实现MutationObserver（）的工作示例：

---

---

有关此参数和其他参数的更多详细信息，请查看文档。

从代码的外观来看，您似乎正在尝试检查是否存在动态创建的元素，对吗？如果是这样的话，每400ms检查一次DOM远远不是理想的方法。改用变种观察者。@RoryMcCrossan-Hey。是的，有点。代码将在产品列表页面上运行，当用户滚动时，页面上会出现更多产品，而不会刷新页面。这就是为什么我想让它继续检查病情。你知道如何使用MutationObserver吗？这就是我实现我所需要的吗？如前所述，我没有那么丰富的经验。谢谢你，你可以在2分钟的谷歌搜索中轻松找到关于MutationObserver的文档和示例。如果您对它还有任何疑问，请使用该实现编辑您的问题。@eloyra所以我在谷歌上搜索并阅读了一篇关于它的文章。看起来还好，我理解这个概念。但我还远远没有足够的经验来理解如何在代码中实现这一点，因为我刚刚了解了这一点。你能给我看看吗？问题更新了，我插入了我读过的文章的链接。我还从代码中删除了setInterval。@R.Srour我已经发布了答案。我希望您觉得它有用。从代码的外观来看，您似乎在尝试检查是否存在动态创建的元素-是这样吗？如果是这样的话，每400ms检查一次DOM远远不是理想的方法。改用变种观察者。@RoryMcCrossan-Hey。是的，有点。代码将在产品列表页面上运行，当用户滚动时，页面上会出现更多产品，而不会刷新页面。这就是为什么我想让它继续检查病情。你知道如何使用MutationObserver吗？这就是我实现我所需要的吗？如前所述，我没有那么丰富的经验。谢谢你，你可以在2分钟的谷歌搜索中轻松找到关于MutationObserver的文档和示例。如果您对它还有任何疑问，请使用该实现编辑您的问题。@eloyra所以我在谷歌上搜索并阅读了一篇关于它的文章。看起来还好，我理解这个概念。但我还远远没有足够的经验来理解如何在代码中实现这一点，因为我刚刚了解了这一点。你能给我看看吗？问题更新了，我插入了我读过的文章的链接。我还从代码中删除了setInterval。@R.Srour我已经发布了答案。我希望您觉得它有用。我感谢您的帮助，但我的代码似乎无法让它工作：（它设法在页面加载时隐藏类，但新元素不会隐藏。我将“容器”更改为“迷你产品列表”，即父（）。父（）每个迷你产品的。我还能做什么？请注意，您是通过ID而不是通过类获取元素。如果您提供了一个工作示例，我可以对其进行调试，但事实上我无法为您提供更多帮助。我的代码目前正在工作，但与您提供的变异无关。我不知道在您发送的代码中放置我的代码的位置。是的，我尝试了使用IDll，仍然不起作用。当我尝试使用该类时，我将其更改为getElementsByClassName。不走运。我的意思是，如果您向我提供您尝试使用的当前代码（使用MutationObserver），我可以调试它。使用“工作”并不意味着“工作良好”，只是“我可以尝试”，如jsfiddle。@R.Srour您正在调用observer.observe，在传递给MutationObserver构造函数的回调函数中进行观察。您需要从外部调用它。如在我的示例中所示。我已经修改了您的小提琴，我感谢您的帮助，但我似乎无法让它在我的代码中工作：（它设法在页面加载时隐藏类，但新元素不会隐藏。我将“容器”更改为“迷你产品列表”，它是父对象（）。父对象（）每个迷你产品的。我还能做什么？请注意，您是通过ID而不是通过类获取元素。如果您提供了一个工作示例，我可以对其进行调试，但事实上我无法为您提供更多帮助。我的代码目前正在工作，但与您提供的变异无关。我不知道在您发送的代码中放置我的代码的位置。是的，我尝试了使用IDll，仍然不起作用。当我尝试使用该类时，我将其更改为getElementsByClassName。不走运。我的意思是，如果您向我提供您尝试使用的当前代码（使用MutationObserver），我可以调试它。使用“工作”并不意味着“工作良好”，只是“我可以尝试”，如JSFIDLE。@R.Srour您正在调用传递给MutationObserver构造函数的回调函数中的observer.observe。您需要从外部调用它。如我的示例中所示。我已经调整了您的小提琴

  const observer = new MutationObserver(changes => {
    if ($('.mini-product').length) {
      console.log('Change detected!!');
      console.log(changes);
      // Repeat logic here for the new element
      // observer.disconnect(); for ending the observer, though in your case maybe you don't want that at all
    }