Htykuut

I'm creating a webpage that will automatically refresh a content to always get the latest data in the database. This is my code in Javascript.

setInterval(function() {

    $("#status").load('refresh.php');

},1000);

In my javascript, I'm automatically refreshing the #status with refresh.php every second.

But when I inspect the element of my webpage and click on the network. It is also requesting(spamming) the refresh.php every second which is I think a bad practice.

Can you help me how to fixed this? Or can you suggest better ajax code to auto refresh a content without requesting the php file too much?

You should probably use a websocket for this, get the latest status as data from the server and then change only that section of the page using javascript

This code will be request refresh.php later at timeouts.min every time when new (requested) value of #status is equal to current. If values are different, next timeout will be timeouts.min again.

var timeouts={

 min:1000, // min await timeout = 1s

 max:16000 // max await timeout = 16s

};

var currentTo = timeouts.min;



function setAutoRefresh( to ){

  setTimeout( function() {

    var current = $("#status").text();// or .html()

    $("#status").load('refresh.php', function() {

      // if we are load a new value

      if( current !== $("#status").text()) {

        currentTo = timeouts.min;

      // if loaded value are same to current

      } else {

        currentTo += timeouts.min; // or currentTo *= 2; for example

        if( currentTo > timeouts.max ){

          currentTo = timeouts.max;

        }

      }

      console.log('Next #status refresh after ' + currentTo + 'ms');

      // Set a new timeout

      setAutoRefresh( currentTo );

    });

  }, to);

}



// Set the first timeout

setAutoRefresh( timeouts.min );