使用.js脚本禁用php的缓存

Question

I have a js that fetches sql queries from different php files and html that displays the js vars.

As of now it works for a while, but will slowly overload my browser due to the js caching each of the php pages as it fetches data, eventually crashing a browser.

I have a couple questions about this: A) How would I disable the caching of the "old" set of the 2 php pages... B) Is there a better way to to this?

var seconds = 3;
var divs = new Array("div1", "div2");
var urls = new Array("jaxcount.php", "jaxcount2.php");

    // Refresh DIV
    function refreshdiv() {
        for (var i = 0; i < 2; i++) {
            var div = divs[i];
            var url = urls[i];
            dorefresh(div, url);
            break;
        }
    }

    function dorefresh(div, url){
        // Stolen XMLHTTP Request Object

        var xmlHttp;
        try {
            xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Exploder
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    return false;
                }
            }
        }

        // IE Optimizations

        fetch_unix_timestamp = function () {
            return parseInt(new Date().getTime().toString().substring(0, 10));
        };

        var timestamp = fetch_unix_timestamp();
        var nocacheurl = url + "?t=" + timestamp;

        // The Beef

        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState === 4) {
                document.getElementById(div).innerHTML = xmlHttp.responseText;
                setTimeout('refreshdiv()', seconds * 1000);
            }
        };
        xmlHttp.open("GET", nocacheurl, false);
        xmlHttp.send(null);
    }

    // Trigger Refresh

    var seconds;
    window.onload = function startrefresh() {
        setTimeout('refreshdiv()', seconds * 1000);
    };

Answer 1

The problem has nothing to do with caching of pages in the browser. It has to do to a waterfall effect with your Ajax calls.

The problem is coming from the fact you are calling setTimeout('refreshdiv()', seconds * 1000); inside of the callback of the Ajax call.

You are making two setTimeout calls every time you call refreshdiv. Every time it is call you make two calls and it adds up. Eventually you are making tons of Ajax calls. Visually it is something like this:

First Call      A
               / \
              /   \
Second       A     A
            / \   / \
Third      A   A A   A  
4th       AA  AA AA  AA
5th      AAAAAAAAAAAAAAAA 

How can you fix it? Check to see if you have a timer active, if you do not have an active timer, set it.

Change

setTimeout('refreshdiv()', seconds * 1000);

to be something like

if (!window.timer) {
    window.timer = setTimeout(refreshdiv, seconds * 1000);
}

There are other solutions, but this one is simple to implement.