Question

有没有办法阻止队列构建JQuery AJAX调用？

我有一个产品列表，并在悬停时通过AJAX调用加载其他信息。问题是如果你在停止时在菜单上上下运行鼠标，就会创建一个队列，你必须等待它才能赶上所有产品。

我正在使用Hide（）函数，因此当您退出菜单时，它会立即恢复为默认内容，但队列仍在后台进行，它只是隐藏。

当你有一堆没有边距的元素时，悬停函数的mouseout部分会在鼠标输入下一个元素之前调用吗？

目前的代码很简单：

$("#product-menu a").hover(
                function() {
                    $("#product-welcome").hide();
                    $("#product-overview").show();
                    $("#product-overview").load("lib/product-overview.php", {"pid": this.id});
                },
                function() {
                    $("#product-overview").hide();
                    $("#product-welcome").show();
                }
            );

Answer 1

您可以使用.ajax()方法创建类似于您的工作，您可以存储jqXHR对象并使用它在当前运行的ajax请求上调用.abort（）。这不会与.load一起使用，因为它不能访问jqXHR对象。

它看起来像这样，

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

Answer 2

当您在开始获取信息之前将鼠标移到产品上时，我会添加一个延迟，还有一个锁定变量，确保一次只完成一个请求。此外，如果用户将鼠标悬停在产品上，您应该一遍又一遍地缓存数据客户端而不是load()相同的产品概述。

Answer 3

查看$.ajaxPrefilter api。

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

JQuery / AJAX - 防止队列建立

3 个答案: