timeout for function (jQuery)

Question

function getNames(){
    // some code
}

This function can be done in one second, but sometimes it freezes itself and html block on the page (ajax inside) on infinite time.

I would like to have time limit for this function. If it doesn't finish in ten seconds, then abort it.

How to do this?

Answer 1

This is really easy with jQuery 1.5’s deferred promises.

The following example creates a Deferred and sets two timer-based functions to either resolve or reject the Deferred after a random interval. Whichever one fires first “wins” and will call one of the callbacks. The second timeout has no effect since the Deferred is already complete (in a resolved or rejected state) from the first timeout action.

// Create a Deferred and return its Promise
function asyncEvent() {
    var dfd = new jQuery.Deferred();
    setTimeout(function() {
        dfd.resolve('hurray');
    }, Math.floor(Math.random() * 1500));
    setTimeout(function() {
        dfd.reject('sorry');
    }, Math.floor(Math.random() * 1500));
    return dfd.promise();
}

// Attach a done and fail handler for the asyncEvent
$.when( asyncEvent() ).then(
    function(status) {
        alert( status + ', things are going well' );
    },
    function(status) {
        alert( status + ', you fail this time' );
    }
);

You can easily modify this example to suit your needs:

// Create a Deferred and return its Promise
function asyncEvent() {
    var dfd = new jQuery.Deferred();

    // Your asynchronous code goes here

    // When the asynchronous code is completed, resolve the Deferred:
    dfd.resolve('success');

    setTimeout(function() {
        dfd.reject('sorry');
    }, 10000); // 10 seconds
    return dfd.promise();
}

// Attach a done and fail handler for the asyncEvent
$.when( asyncEvent() ).then(
    function(status) {
        alert( status + ', things are going well' );
    },
    function(status) {
        alert( status + ', you fail this time' );
    }
);

Answer 2

If it is the function itself that's grinding away, just set a timer and either return or throw if it exceeds your maximum time period.

If, on the other hand, if the delay is caused by the AJAX request not returning, and you are using $.ajax(), you can always set the timeout setting. It should kill the request. Note that you need to avoid relying on the success callback, since it only gets called if the request succeeds. Instead, use complete callback to watch for failures. It will tell you if an error occurred. According to the documentation, this is available in 1.4 onwards. I'm not sure about pre-1.4, but I think it worked in 1.3 as well.

Answer 3

As suggested above, you can go with Web Workers if //some code is something that might take a long time sometimes (like waiting for large amounts of information from a slow server). That will allow background processing without locking the main page. Note that not all browsers support it yet.

You can find a nice introduction here.