Prevent New Request While fetching previous request in jQuery

Question

i want to how can i prevent new ajax request while browser is fetching previous request ! i create a system contain a table of data like this :

col1 | col2 | col3 data1| data2| data3

when user mouse over data fields I'm used Ajax to retrieve more information about data on mouse over event but if user rapidly move his/her cursor of data column multiple request has been created . how do i prevent that ?

Answer 1

I think you can cache the jquery ajax request object and then abort it later.

var xhr = $.ajax({...});

xhr.abort();

Answer 2

Ben Nadel has a great pattern for handling AJAX errors that includes checking for multiple requests of the same type.

His blog post may help you out.

Answer 3

In your case, you need a small delay between the mouseover and the AJAX request. Start by doing a setTimeout for the AJAX request. If another mouseover even is issued during this timeout, clear the timeout and set a new Timeout.

Here is a simplified version (assuming you use the same function cell_onmouseover as a handler for all elements.

var timeoutId = null; //Should be visible to both functions.
function cell_onmouseover()
{
    if (timeoutId)
    {
        clearTimeout(timeoutId);
        timeoutId = null;
    }
    timeoutId = setTimeout(callAJAX, 500); //half a second delay.
}

function callAJAX()
{
    //dostuff
}

[Edit]: You can also enhance this to abort a in-progress AJAX call when users hover on a new element.