Javascript - Wie wird ein Teil des Codes erst ausgeführt, nachdem die Seite aktualisiert wurde?

Question

Wichtig: Obwohl dies wahrscheinlich mit php (Ich verwende WooCommerce auf Wordpress), möchte ich dieses Skript nur in meinem Browser ausführen. Deshalb möchte ich es in Javascript machen. Daher verwende ich Custom Javascript for Websites, um mein Skript von meinem Browser zu laden.

Was mein Skript tun sollte: Überprüfen Sie, ob die Daten eines bestimmten Elements geändert wurden.

Logik: Schritt 1) ​​Holen Sie sich die spezifische Zeichenkette (Bestellnummer) einer bestimmten Klasse und erinnern Sie sich lokal daran. Schritt 2) Aktualisieren Sie die Seite. Schritt 3) Erneut die spezifische Zeichenfolge (Bestellnummer) einer bestimmten Klasse abrufen. Schritt 4) Wenn Zeichenfolgen nicht übereinstimmen, führen Sie eine Funktion aus (Audio abspielen).

Problem: Nach dem Neuladen der Seite wird das Skript von Anfang an neu gestartet. Daher führt dies zum Überschreiben der gespeicherten Zeichenfolge. Daher sind gespeicherte und neu abgerufene Zeichenfolge immer gleich.

Frage: Wie mache ich das Skript, um den 3. Schritt erst nach der Aktualisierung auszuführen, so dass die gespeicherten Daten sich nicht selbst überschreiben?

Aktuelle Code:

var OrderIdOld = document.getElementsByClassName("row-title"); // Select every single element with ClassName "row-title" 
var x = (OrderIdOld[0].innerText); // Get the string of the first element of the class "row-title" 
var compareOld = x.slice(-1); // Get the last element of the string (since it will be a number, we can change the string into a number easily later) 
localStorage.setItem("compareOld", compareOld); // Store this element in local storage, so that it can be used after page reloads. 

setInterval ("window.location.reload()", 30000); // Reload page every 30 secs. 

var remembered = localStorage.getItem("compareOld"); // Assign stored element to a new var. 
var n = compareOld.valueOf(); // Turn stored element into a number (for easy comparison later). 

var OrderIdNew = document.getElementsByClassName("row-title"); // Select every single element with ClassName "row-title" 
var y = (OrderIdNew[0].innerText); // Get the string of the first element of the class "row-title" 
var compareNew = y.slice(-1); // Get the last element of the string (since it will be a number, we can change the string into a number easily later) 
var m = compareNew.valueOf(); // Turn fetched element into a number (for easy comparison later). 


function beep() { 
    var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="); 
    snd.play(); 
} // Function that will play the sound. 


if (n!=m) { 
beep(); 
} // Run function if two numbers are not equal. 

Zusätzliche: Ich habe die Teile des Codes von verschiedenen Fragen auf Stackoverflow gesammelt. Das heißt, ich habe in der vergangenen Woche nach diesem Thema gesucht. Dies sind meine ersten Fragen. Hoffentlich habe ich die Frage so formatiert, dass sie leicht zu verstehen ist.

BEARBEITEN: Das Problem wurde behoben. Ich benutzte die Idee, nur den ersten Schritt der Funktion beim ersten Laden der Seite auszuführen. Dieser Beitrag hat mir geholfen, Funktionalität zu erhalten arbeiten https://stackoverflow.com/a/22334768/7929506

Der Arbeits Code sieht wie folgt aus:

function beep() { 
window.open('https://www.youtube.com/watch?v=EQ3zPIj2O5k','_blank'); 
} 

if (sessionStorage.getItem("visit") == null) { 
    var OrderIdOld = document.getElementsByClassName("row-title")[0].innerText.slice(-1).valueOf(); 
    sessionStorage.setItem("OrderIdOld", OrderIdOld); 
    sessionStorage.setItem("visit", new Date()); 
    setTimeout("window.location.reload()", 10000); 
} 

else { 
    var OrderIdNew = document.getElementsByClassName("row-title")[0].innerText.slice(-1).valueOf(); 
    var x = sessionStorage.getItem("OrderIdOld"); 
    if (x==OrderIdNew) { 
     setTimeout("window.location.reload()", 10000); 
     } 
    else { 
     beep(); 
     var x = sessionStorage.getItem("OrderIdOld"); 
     sessionStorage.removeItem("OrderIdOld"); 
     sessionStorage.removeItem("visit"); 
     setTimeout("window.location.reload()", 10000); 
    } 
} 

Answer 1

Wenn Sie die Seite ersten Mal aktualisieren, können Sie einfach eine Flag-Variable anhängen URL Wetter zu identifizieren, ihre eine Aktualisierung oder ein erstes Mal laden. Auf dieser Grundlage können Sie eine lokalisierte Variable an das Skript übergeben, und wenn dies eingestellt ist, müssen Sie andernfalls nicht aktualisieren.