JQuery / AJAX - Prevent Queue Build Up

Is there a way to stop a queue build up of JQuery AJAX calls?

I have a list of products and on Hover additional information is loaded via an AJAX call. The problem is if you run the mouse up and down the menu when you stop it creates a queue which you have to wait to catch up as it flicks through all the products.

I am using the Hide() function so when you come out of the menu it immediately reverts back to the default content but the queue is still going on in the background it's just hidden.

When you have a stack of elements with no margin is the mouseout part of the hover function called before the mouse in of the next element?

Current code is simply:

$("#product-menu a").hover(
                function() {
                    $("#product-welcome").hide();
                    $("#product-overview").show();
                    $("#product-overview").load("lib/product-overview.php", {"p开发者_运维百科id": this.id});
                },
                function() {
                    $("#product-overview").hide();
                    $("#product-welcome").show();
                }
            );

You can make something like your doing work using the .ajax() method you can store the jqXHR object and use it to call .abort() on a currently running ajax request. This wont work with .load because it does not give access to the jqXHR object.

It would look something like this,

var activeRequest;    
...
$("#product-menu a").hover(
                        function() {
                            ...
                            if(activeRequest.abort)
                            {
                                activeRequest.abort();
                            }
                            activeRequest = $("#product-overview").ajax(...);
                        },

I would add a delay when you move your mouse over the product before it start's fetching information and also a locking variable that makes sure only one request is done at a time. Also, you should cache the data client side and not load() the same product overview over and over again if the user hovers over the product.

Have a look at the $.ajaxPrefilter api.

$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
    if(/*some condition*/)
       jqXHR.abort()
});