Auto refresh with ajax is hanging / crashing browser after 10-15 seconds

Question

Auto refreshing the div with ajax is hanging the browser in 10-15 seconds. I dont know what is the issue. When i check in laptop it hangs/crashes and also in mobile.

In laptop it says browser unresponsive.

The code is below:

function ajaxCall() {
    $.ajax({
        url: "cart_checkout.php", 
        success: (function (result) {
            $("#resultDiv").html(result);
        })
    })
};
ajaxCall();
setInterval(ajaxCall, (1 * 1000));

your code refresh div content every 1 second `setInterval(ajaxCall, (10 * 1000));` — Mamdouh Saeed, Oct 21 '16 at 19:18
Is your success callbak fired , Do you checked your ajax status, is it completed, any error console says? — Mamdouh Saeed, Oct 21 '16 at 19:28
to check ajax status see http://stackoverflow.com/a/5344186/7040620 — Mamdouh Saeed, Oct 21 '16 at 19:42

cchamberlain · Answer 1 · 2016-10-22T20:06:40.810

Your code has 2 potential problems that could cause that issue.

You should not use setInterval here as it will trigger the AJAX call regardless of whether the last request finished. It does not take into account each requests duration and load time.

Full working example of polling an API and loading the results into an element:

function poll(element, url, frequency) {
  let timeoutID
  let count = 0
  function _poll() {
    count++
    $.ajax({
      url,
      success: ((result) => {
        element.innerHTML = `Response ${count} at ${new Date().toLocaleString()}\n${JSON.stringify(result, null, 2)}`
        if(frequency)
          timeoutID = setTimeout(_poll, frequency)
      })
    })
  }
  _poll()
  return () => {
    console.info('cancelling polling')
    clearTimeout(timeoutID)
  }
}

$(() => {
  // Start polling every 2 seconds (from time last response was received
  let cancelPolling = poll(document.getElementById('result'), 'https://api.nytimes.com/svc/search/v2/articlesearch.json', 2000)

  // Cancel polling in 15 seconds
  setTimeout(cancelPolling, 15000)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<pre id="result" />

The second issue is that dropping the HTML directly into the result div is a synchronous operation and will tie up the JavaScript thread causing it to be unresponsive. This might be fine if the payload is small (paged), but for large payloads you will see the browser hang. Another option is to return JSON instead of raw HTML, split it up into manageable chunks (~5 rows of data per chunk), then write the results to HTML using requestAnimationFrame callbacks.

i tried your code but now I am getting the error that session has already been started and it does not give this error if i use my code — Fahad Almehaini, Oct 22 '16 at 19:42
Nothing in the code I've posted should throw that error. You'll need to post the full error message and stack trace for me to be able to help with that. — cchamberlain, Oct 22 '16 at 19:43
A session had already been started - ignoring session start() in c:\xampp\htdocs\site\cart_checkout.php on line 43.... — Fahad Almehaini, Oct 22 '16 at 19:48
This sounds like a PHP issue to me. I posted a working example of the client code you were asking about. You may need to wrap the code that starts up your app and this code in a `$(() => poll($element, '', 1000))` if you need to wait for the websites DOM to finish loading before starting. — cchamberlain, Oct 22 '16 at 20:03
the same issue of session. The main file is cart.php in this file session is called also and in cart_checkout.php also because this cart_checkout.php also has to have ssession — Fahad Almehaini, Oct 22 '16 at 20:16

Auto refresh with ajax is hanging / crashing browser after 10-15 seconds

1 Answers1