Get if browser is busy

Question

I'm trying to find a way to get if the browser is currently busy from JavaScript. I'm looking at making a Firefox extension to inject a Boolean value or something if the current page is loading something (either through ajax or just normal page loads), or the same with a Greasemonkey script, or through some JavaScript API (this would be the best solution, but from what I can see, nothing of the sort exists).

I was wondering what the best way to do this would be. I've been looking for Firefox Addon / Greasemonkey tutorials for making something like this and can't find anything. Does anyone have any tips or resources they could point me towards or better solutions for solving this?

Thanks

Edit: and by busy, I mostly just need to know if the browser is sending or receiving data from a server.

Answer 1

jQuery, a great javascript framework for DOM manipulation and performing ajax calls, provides two great hooks for determining when ajax calls are in progress:

$.ajaxStart() and $.ajaxStop()

Both of these hooks take a handler function that will be called when an ajax call is about to start, and when all ajax calls have ceased, respectively. These functions can be bound to any element on the page. You could set a global boolean value in your $.ajaxStart() handler to true and set it back to false in your $.ajaxStop() handler.

You could then check that boolean flag and determine whether ajax calls are in progress.

Something along these lines:

$(document).ajaxStart(function() {
    window.ajaxBusy = true;
});

$(document).ajaxStop(function() {
    window.ajaxBusy = false;
});

As far as determining when the browser is loading the current page, you could check document.readyState. It returns a string of "loading" while the document is loading and a string of "complete" once it has loaded. You can bind a handler to document.onreadystatechange and set a global boolean that will indicate whether the document is still loading or not.

Something like this:

document.onreadystatechange = function() {
    switch (document.readyState) {
        case "loading":
            window.documentLoading = true;
            break;
        case "complete":
            window.documentLoading = false;
            break;
        default:
            window.documentLoading = false;
    }
}   

EDIT:

It appears that $.ajaxStart() and $.ajaxStop() do NOT work for ajax calls invoked without jQuery. All XMLhttprequest objects have an event called readystatechange that you can attach a handler to. You could utilize this functionality to determine whether or not that individual call is done. You could push all references to outstanding calls onto an array, and in a setInterval() check that array's length. If it > 1, there are out standing ajax calls. It's a rough approach, and only one way of getting about it. There are probably other ways to do this. But here's the general approach:

// declare array to hold references to outstanding requets
window.orequets = [];

var req = XMLHttpRequest(); 
// open the request and send it here....
// then attach a handler to `onreadystatechange`
req.onreadystatechange = function() {
    if (req.readyState != 4 || req.readyState != 3) {
        // req is still in progress
        orequests.push(req);
        window.reqPos = orequests.length -1
    } else {
        window.orequests = orequests.slice(reqPos, reqPos + 1);
    }
}

Do the above for each XMLHttpRequest() you will be sending, of course changing the request name for each one. Then run a setInterval() that runs every x amount of milliseconds, and checks the length property of orequests. If it is equal to zero, no requests are happening, if it is greater than zero, requests are still happening. If no requests are happening, you can either clear the interval through clearInterval() or keep it running.

Your setInterval might look something like this:

var ajaxInterval = setInterval(function() {
    if (orequests.length > 0) {
      // ajax calls are in progress
      window.xttpBusy = true;
    } else {
      // ajax calls have ceased
      window.xttpBusy = false;
      // you could call clearInterval(ajaxInterval) here but I don't know if that's your intention
    },
    3000 // run every 3 seconds. (You can decide how often you want to run it)
}); 

Answer 2

Here's what I think I'll end up doing. This solution is like the one Alex suggested with the Jquery events, except that it works with anything that uses the XMLHttpRequest (Including Jquery):

var runningAjaxCount = 0;

var oldSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
    oldOnReady = this.onreadystatechange;
    this.onreadystatechange = function() {
        oldOnReady.call(this);
        if(this.readyState == XMLHttpRequest.DONE) {
            ajaxStopped();
        }
    }
    ajaxStarted();
    oldSend.apply(this, arguments);
}

function ajaxStarted() {
    runningAjaxCount++;
}

function ajaxStopped() {
    runningAjaxCount--;
}

function isCallingAjax() {
    return runningAjaxCount > 0;
}

function isBrowserBusy() {
    return document.readyState != "complete" && isCallingAjax();
}