javascript - How to disconnect a MutationObserver from inside its callback function? - Stack Overflow

admin管理员组

文章数量:1303327

I'm using MutationObserver to wait for the creation of an element on the page, and then adding a button on it (with init function).

I only need to add one button but mutations keep happening after this. I would like to disconnect() the observer after having added this button.

I tried something like this:

function detect_node_for_buttons(mutations){
    var selector = 'div[class="_2o3t fixed_elem"]';
    mutations.forEach(function (mutation){
        var element =   $(document).find(selector);
        if (element){
            init();
            observer.disconnect();
            return;
        }
        if (!mutation.addedNodes) return;
        for (var i = 0; i < mutation.addedNodes.length; i++){
            if (mutation.addedNodes[i].matches(selector)){
                init();
                observer.disconnect();
            }
        }
    });
}

var observer = new MutationObserver(function (mutations){
    detect_node_for_buttons(mutations);
});

But it didn't work (Perhaps because observer isn't yet defined when I call observer.disconnect() in detect_node_for_buttons())?

How could I do it?

I'm using MutationObserver to wait for the creation of an element on the page, and then adding a button on it (with init function).

I only need to add one button but mutations keep happening after this. I would like to disconnect() the observer after having added this button.

I tried something like this:

function detect_node_for_buttons(mutations){
    var selector = 'div[class="_2o3t fixed_elem"]';
    mutations.forEach(function (mutation){
        var element =   $(document).find(selector);
        if (element){
            init();
            observer.disconnect();
            return;
        }
        if (!mutation.addedNodes) return;
        for (var i = 0; i < mutation.addedNodes.length; i++){
            if (mutation.addedNodes[i].matches(selector)){
                init();
                observer.disconnect();
            }
        }
    });
}

var observer = new MutationObserver(function (mutations){
    detect_node_for_buttons(mutations);
});

But it didn't work (Perhaps because observer isn't yet defined when I call observer.disconnect() in detect_node_for_buttons())?

How could I do it?

• javascript
• callback
• mutation-observers

Share Follow edited Sep 17, 2021 at 6:46 UserScripters Bot 4166 bronze badges asked Sep 2, 2015 at 13:35 vmontecovmonteco 15.5k1717 gold badges5959 silver badges9090 bronze badges 2

• Are you saying detect_node_for_buttons is triggered again, or init is triggered again? .disconnect will stop detect_node_for_buttons from running, but if there were multiple items in mutations or .addedNodes then you'll still keep looping over them. – loganfsmyth Commented Sep 2, 2015 at 18:04
• @loganfsmyth I'm waiting for the creation of a single element. but the mutationobserver (and therefore detect_node_for_buttons) is still triggered that's right. I just need to execute it once. Now I think it's dirty and I would like to "clean" the mutationobserver after the function execution. – vmonteco Commented Sep 2, 2015 at 22:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Callback function in MutationObserver is called with two arguments: mutations array and observer object itself. Because of how you wrote the code detect_node_for_buttons never gets observer object. This will do the trick:

var observer = new MutationObserver(detect_node_for_buttons);

You also have to add this argument to function declaration:

function detect_node_for_buttons(mutations, observer){ ... }

本文标签： javascriptHow to disconnect a MutationObserver from inside its callback functionStack Overflow