[JS] Check wanneer een <span> verdwijnt

[Reveller]

Het gaat om het script hieronder. Wat ik probeer te doen is het volgende:

• het script runnen in de browser console
• script checkt elke seconde of een bepaalde <span> bestaat of niet
• zodra de <span> verschijnt, output naar de console "span exists"
• blijf elke seconde checken. Zolang de <span> er is, doe niets. Maar zodra hij verdwijnt, schrijf in console "span disappeared"
• de <span> kan meerdere inhoud hebben (buy, sell, etc) maar dat doet er op dit moment niet toe. Maar daarom heb ik dus dat if-statement

Wat goed gaat:

• Zodra de <span> verschijnt, krijg ik de verwachte uitput

code:

span appeared

Maar zodra de <span> verdwijnt, gaat het fout en raakt de console in een infinite loop:

code:

span disappeared 
span appeared 
span disappeared 
span appeared 
span disappeared
...

code:

function f() {
    try {
        b = document.querySelector('#main > header > div>div>span').textContent;
    } 
    catch (TypeError) { // element does not exit
        if (span_exists) {
            // if it does not exist, but it did previously, then it just disappeared
            console.log("span disappeared" + "\n");
            span_exists = false;
        }
        return;
    }

    if (b === "buy") { // element exists
        if (span_exists) {
            // span existed already.. do nothing
        }
        else { // span just appeared
            console.log("span appeared" + "\n");
            span_exists = true;
        }
    }
}


function check_span() {
    span_exists = false;
    interval = setInterval(f, 1000);
    alert("checking for span");
    return interval;
}

> check_span()

Wat doe ik verkeerd?

[Groentjuh]

Probeer het eens met regel 14 t/m 22 eens in de try/catch-block.

Ik denk dat de waarde b blijft staan van de vorige check. Daardoor kom je door de if-statement op regel 14 heen, terwijl de span niet meer bestaat. Daardoor krijg je dus regel 8 en 19 achter elkaar in één call van f

Als b een lokale var zou zijn, dan zou het ook werken.

[ Voor 9% gewijzigd door Groentjuh op 05-04-2020 12:47 ]

[Reveller]

@Groentjuh Dat is geweldig! Wist niet dat het zo simpel was, sorry voor het openen van een topic maar ik had al van alles geprobeerd (behalve dit) en zag het echt niet meer. Thanks!

[Juup]

Hiervoor is trouwens de MutationObserver uitgevonden.

[Tsjilp]

Wat @Juup zegt, kijk eens naar de MutationObserver, dan heb je een 'native' implementatie, die niet met zo'n lelijke setinterval werkt.

[JustAnotherDev]

Wat Jaaap] en Tsjilp beide inderdaad zeggen.
Hieronder zie je een (snel gehackt) voorbeeld van een implementatie ervan om je op gang te helpen.
Het voordeel van een MutationObserver is dat je reageert op een verandering en je code dus niet continue aangeroepen wordt.

Voor exacte werking kan je het best de API bekijken in de link van @Juup

code:

// ==UserScript==
// @name         Remove Login Dialog Instagram
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Scrolling instragram without logging in
// @author       You
// @match        https://www.instagram.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    console.log('GreaseMonkey: creating observer');
    var observer = new MutationObserver(function (mutationsList, observer) {

        if (mutationsList.length > 0 &&
                mutationsList[0].type === 'attributes' &&
                mutationsList[0].attributeName &&
                mutationsList[0].attributeName === 'style') {

            // Enable scrolling
            console.log("GreaseMonkey: remove overflow hidden.");
            document.getElementsByTagName('body')[0].style.overflow = null;
            // Check if dialog exist
            var dialog = document.querySelector("div[role='dialog']");
            if (dialog) {
                // Remove dialog
                dialog.parentElement.parentElement.removeChild(dialog.parentElement);
                console.log("GreaseMonkey: remove login dialog.");
            }
        }
    });
    observer.observe(document.getElementsByTagName('body')[0], {attributes: true, childList: false, subtree: false});
})();