javascript - DOM MutationObserver 问题 - Javascript

Question

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

在这里您可以看到 10 月 25 日星期四的等候名单按钮。要求是如果类(class)已满，则显示等候名单而不是按钮，我做到了。以下是相同的代码。

$("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，但我现在面临的问题是，如果您检查检查元素，您会看到 anchor 类每 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);
});

Answer 1

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

这是应用的逻辑。

由于我正在为等待列表部分添加新类 hc-button，因此检查该类是否存在。如果没有则调用 postWidgetLoad 函数，否则循环将停止执行，因为类已经创建。