Deny new query When receiving a previous query in jQuery

Question

I want how I can prevent a new ajax request when the browser retrieves the previous request! I am creating a system containing a data table, for example:

col1 | col2 | col3 data1 | data2 | data3

with a user mouse over data fields, I use Ajax to get additional information about the data on the mouse event, but if the user quickly moves his cursor over the data column, several queries are created. how can i prevent this?

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 AJAX, .

.

Answer 3

In your case, you need a slight delay between mouseover and AJAX request. Start by executing setTimeout for an AJAX request. If another prompt is issued during this timeout, clear the timeout and set a new timeout.

Here is a simplified version (assuming you use the same cell_onmouseover function 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 improve this to interrupt an incoming AJAX call when users hover over a new item.