Why setTimeout doesn't work on IE

Question

A very simple webpage, it has an empty div in it:

<div id="joblist">
</div>

<script type="text/javascript">
    readJobList();
</script>

And the javascript:

function handleReadJobList(text) {
    var e = document.getElementById("joblist");
    e.innerHTML = text;
    setTimeout(function(){readJobList();}, 1000);
}

function readJobList() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            handleReadJobList(xhttp.responseText);
        }
    }
    xhttp.open("GET", "joblist.ajax", true);
    xhttp.send();
}

When the browser loads the page, readJobList will be called for first time, it sends a HTTP request. handleReadJobList will read the response text, update the content of div, and use setTimeout to call readJobList after one second. This is a cycle, although it's asynchronous.

This code works well on Firefox, Chrome and Opera. But on IE11 it doesn't work. I don't know why. The content of the div only updated one time. It will not be updated anymore.

How to fix it ?

IE is probably caching the AJAX request. Try something like `xhttp.open('GET', 'joblist.ajax?_=' + Date.now(), true)` — Phil, Nov 30 '15 at 03:00

score 2 · Accepted Answer · edited May 23 '17 at 12:15

If AJAX works on all browsers except IE then it's probably because IE is caching the result. You can use a cache busting random query param (like suggested by Phil) or better yet send the correct headers to tell IE (and all other browsers) not to cache your AJAX response.

See this answer for a known working set of headers that covers all major browsers: How to control web page caching, across all browsers?

Why setTimeout doesn't work on IE

1 Answers1