Using jQuery and AJAX, I've created a script that loops every second to refresh a console.
The page is setup like so:
index.php -> console.php -> consoleQuery.php
Where index.php
is the main page, with buttons that can trigger multiple AJAX scripts and replace the body of index.php
with the returned contents. One of the scripts being console.php
and part of console.php
includes the following script.
window.setInterval(function() {
$.ajax({
type: "POST",
url: "ajax/consoleQuery.php",
data: "",
success: function(response) {
$("#consoleBody").html(response);
}
});
console.log("Console refreshed");
}, 1000);
This script calls upon consoleQuery.php
to essentially update the body of the page and refresh it every second.
The problme is however, upon clicking another page thats parented to index.php
(for example index.php -> home.php
)
the JS that is causing the loop still occurs in the background when home.php
replaces the body of index.php
. On top of this, triggering console.php
again causes it to then refresh the console twice per second and so on if its clicked multiple times. Essentially the loop is running in multiple instances.
What I want to try and do is upon triggering one of the AJAX requests that doesn't request console.php
, stop the looping script that is refreshing the body of the page.
Is there any way to stop the loop when accessing a different page? Thanks in advance!