DOM MutationObserver 的问题 - Javascript答案

【问题标题】：Issue with DOM MutationObserver - JavascriptDOM MutationObserver 的问题 - Javascript
【发布时间】：2018-10-23 10:30:31
【问题描述】：

https://www.skycandyaustin.com/class/open-studio/

在这里，您可以看到 10 月 25 日星期四的候补名单按钮。要求是如果班级已满，则显示候补名单而不是按钮，我就是这样做的。下面是相同的代码。

$("div.bw-session:has(span.hc_waitlist)").each(function () {
               $(this).find(".bw-widget__signup-now").hide();
               $("span.bw-widget__cart_button", this).append("<a class=\"hc-button signup_now bw-widget__signup-now bw-widget__cta\" href=\"mailto:"
                   + scConfig.waitlistEmail + "?subject=Waitlist for "
                   + $('div.bw-session__name', this).text().replace(reWhitespace, ' ')
                   + '&body=Hello%2c  %0D%0A %0D%0A Please add me to the Waitlist for '
                   + $('div.bw-session__name', this).text().replace(reWhitespace, ' ')
                   + " on " + $(this).parent().children('.bw-widget__date').text().replace(/,/g, "")
                   + " with " + $("div.bw-session__staff", this).text()
                   + ".\">Waitlist</a>");
 });

然后我使用了 DOM MutationObserver，但我现在面临的问题是，如果您检查检查元素，您会看到锚类每 1 秒附加一次。这是相同的代码。我只需要附加一次元素。那你能帮我解决这个问题吗？

// Observer way to listen for changes
// Create an observer instance

var observer = new MutationObserver(function (mutations) {
    if (mutatingWidget === false) {
        if (mutationTimer > 0) {
            window.clearTimeout(mutationTimer);
        }
        mutationTimer = window.setTimeout(postWidgetLoad, 1000);
    }
});

// Configuration of the observer:
   var config = { attributes: true, childList: true, subtree: true };

// Pass in the target node, as well as the observer options
$("healcode-widget").each(function () {
    console.debug("Observing changes on " + this.tagName);
    observer.observe(this, config);
});

【问题讨论】：

标签： javascript dom mutation-observers

【解决方案1】：

经过数小时的代码研究找到了解决方案。我使用 setTimeout 检查了 postWidgetLoad 调用的位置。

这是应用的逻辑。

由于我为候补名单部分添加了新的类 hc 按钮，因此检查了该类是否存在。如果没有则调用 postWidgetLoad 函数，否则循环将停止执行，因为该类已经创建。

【讨论】：