HTML Ajax jQuery first load instant

Question

I want to reload my table.php every 3 seconds. I wrote a working code, but when I call the page manual, or refresh it manually, it starts to load my content after 3 seconds, and not instantly. Anyone now, how to call first table.php, and refresh after it every 3 seconds like in my code below?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      setInterval(function () {
        $('#show').load('table.php')
      }, 3000);
    });
  </script>

Time to consider websockets to reduce server load for that amount of traffic — charlietfl, Jan 09 '18 at 20:06

score 2 · Answer 1 · answered Jan 09 '18 at 20:04

There's no way to call function immediately except just call it:

$(document).ready(function() {
  $('#show').load('table.php');

  setInterval(function () {
    $('#show').load('table.php')
  }, 3000);
});

Going further you can encapsulate same calls to a function:

$(document).ready(function() {
  function loadTable() {
      $('#show').load('table.php');
  }
  loadTable();

  setInterval(loadTable, 3000);
});

score 1 · Answer 2 · answered Jan 09 '18 at 20:04

1

Call the table load right away, then include in your loop:

$(document).ready(function() {
    $('#show').load('table.php')
    setInterval(function () {
        $('#show').load('table.php')
    }, 3000);
});

answered Jan 09 '18 at 20:04

Jay Blanchard

34,243
16
77
119

score -1 · Answer 3 · answered Jan 09 '18 at 21:06

A small optimization, the table will be filled exactly after 3 seconds before the previous loading, check the callback:

var reload = function() {
    $('#show').load('table.php', function() {
        // Start the counter when the data is loaded... (to avoid problems when table.php takes more than 3 secs to return the data)
        setTimeout(reload, 3000);
    });
};
// Fill the table immediately
reload();

HTML Ajax jQuery first load instant

3 Answers3