Once Again: SetInterval Doesn't Stop

Question

I know this question has been asked many times, but I'm unable to figure out my problem with those solutions. My setInterval doesn't stop. I've set up a mutation observer to check if a error pops-up. If it does, I want to present a custom message.

let elem = document.querySelector("#Page > div");  
    
    let observer = new MutationObserver(mutationRecords => {
        // console.log(mutationRecords); // console.log(the changes)
        let my_interval = setInterval((interval) => {
            err_msg = document.querySelector("#ErrorMessage");
            if(err_msg != null){
                if(err_msg.innerText == "Custom Message"){clearInterval(my_interval);}
                console.log(err_msg.innerText);
                err_msg.innerText = "Custom Message";
                clearInterval(my_interval);
            }
        }, 10);
    });
      
    observer.observe(elem, {
        childList: true, // observe direct children
        subtree: true, // and lower descendants too
        characterDataOldValue: true // pass old data to callback
      });

Please help me out.

Thanks.

Answer 1

Why do you need a MutationObserver AND a setInterval? They seem like two different approaches to the problem to me (watching for changes). If you start a setInterval in the mutation observer handler, a new interval will be created on each DOM update -- so there might be more than one setInterval running at a time.

Looking at the logic in the mutation observer, the interval is only stopped if #ErrorMessage exists when the interval fires.

So you will have a setInterval for each mutation, but only clear them on certain conditions, possibly leaving some running.