汇总/收集AJAX请求

我有一种情况，用户可以通过使用表示为复选框的一组过滤器来操纵大量数据（呈现在表格中）。汇总/收集AJAX请求

该页面AJAXed了，因此用户不必等到整个页面刷新他们每次点击过滤器。目前实现的方式是让事件处理程序监视所有复选框，并在触发单击事件时从服务器请求过滤的数据。

这工作正常。然而，有做这样一个可用性&性能问题。例如，如果用户点击复选框6，6个AJAX请求被触发，他们都回来以不同的间隔导致网页被更新6次。这很可能会让用户恼火，而且看起来效率很低。

我想提出一些超时的事件处理程序做这样的事情：“等待1秒，如果没有更多的过滤器点击触发的AJAX请求”。但是，目前我只能将所有6个请求延迟1秒。我不确定如何将过滤器信息聚合/收集到1个AJAX请求中。

任何建议，将不胜感激！

来源

2010-03-20 Ganesh Shankar

您是否使用jQuery'$ .ajax'，并且是被替换的内容？（例如最后一次请求返回，这就是显示的内容） – 2010-03-20 12:46:20

@Nick是的。 – 2010-03-20 12:52:54

有“点击”事件首先检查是否有挂起的计时器。如果是这样，点击应该取消它，并启动一个新的计时器。

(function() { 
    var timeout = null; 
    $('#yourForm').find('input:checkbox').click(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     doTheAjaxStuff(); 
    }, 500); 
    }); 
})();

喜欢的东西，这将意味着，直到用户已经暂停了他们箱检查半秒的野生狂潮，就会有再没AJAX请求。一旦用户暂停，请求应该传输当前状态全部复选框，以便可以进行适当的更新。请注意，这意味着您可能需要更改服务器操作的工作方式，因为您不会为每个输入单独调用AJAX。

来源

2010-03-20 12:43:42 Pointy

谢谢，这工作得很好！我不必修改服务器操作，因为它们已经处理了多个过滤器。仅供参考：cancelTimeout实际上是clearTimeout（感谢谷歌;）） – 2010-03-21 01:20:17

感谢您的更正 - 我会解决答案。我一直犯这个错误！ – Pointy 2010-03-21 02:23:38

您可以通过在你的第一个点击事件设置一个标志做到这一点，因此，只有一个计时器被启动：

if (!ajaxRequestsPending) { 
    ajaxRequestsPending = true; 
    window.setTimeout(...); 
}

实际执行AJAX请求将重置标志的代码。

来源

2010-03-20 12:43:13 Ray

如果这就是你所追求的，jQuery有一些内置的功能。如果你只是存储结果来更新页面和use $.ajaxStop()。只有在没有挂起的请求时才会触发，所以在最后一个请求完成之后。如果你连续射击5次，那么它们都会回到顶部，这会被调用一次，这似乎是你所追求的。

Description of .ajaxStop()：

每当一个Ajax请求完成后，jQuery的检查是否还有其他优秀的Ajax请求。如果不存在，jQuery将触发ajaxStop事件。任何和所有已在.ajaxStop()方法中注册的处理程序都会在此时执行。

您可以使用它像这样：

$(document).ajaxStop(function() { 
    $("#myPageElement").html($("#resultStore").html()); 
    $("#resultStore").empty(); //Cleanup 
});

在你的Ajax调用：

$.ajax({ 
    //Existing stuff... 
    success: function(data) { 
    $("#resultStore").html(data); 
    }); 
});

所以所有请求完整为正常，我们只有一次在最后更新的内容，不知道如何变得更简单:)这也有一个好处，如果任何请求失败，最后一个成功的被用来更新页面。

来源

2010-03-20 12:56:14

首先 - 尝试使用jQuery Grid插件 - 某些列可以在客户端进行排序。第二 - 也许你可以发送“确定”按钮发送请求参数！？

来源

2010-03-20 13:06:29 user297994

汇总/收集AJAX请求

回答

相关问题