在jquery中防止重复的ajax事件

What is a good way to block until a previous ajax event is completed?

在前一个ajax事件完成之前阻止的好方法是什么?

I followed How can you make a vote-up-down button like in *? but if I click the button fast enough, it'll send multiple (and maybe inconsistent) events to the server. How do I make it so it'll forcethe user to wait before another click can be registered?

我跟着你如何在*中制作一个投票上下按钮?但如果我足够快地点击按钮,它会向服务器发送多个(也许是不一致的)事件。如何制作它以便用户在另一次点击注册之前等待?

Edit: I also do not want it to block globally - just for that button/item. Do I'll need to maintain a hash?

编辑:我也不希望它全局阻止 - 只是为了那个按钮/项目。我需要维护哈希吗?

3 个解决方案

#1

Well since I wrote that I guess I might as well answer this too ;)

好吧,因为我写了,我想我也可以回答这个问题;)

The 'common' way of doing this is by having an indicator variable that the request is in progress and updating it accordingly before/after everything happens. For my code in that question, you would edit it as follows:

执行此操作的“常见”方法是通过设置一个指示变量来表示请求正在进行中,并在所有事情发生之前/之后相应地更新。对于我在该问题中的代码,您可以按如下方式对其进行编辑:

Outside of the click function, add this:

在click功能之外,添加:

var voting = false; // not initially voting

Inside the click function, at the very top, add this:

在click函数内部,在最顶部,添加:

if(voting) return false; // if voting, return
voting = true; // if not, set voting to true

Inside of both post callbacks, add this:

在两个帖子回调中,添加以下内容:

voting = false; // done voting, set back to false

If you want to maintain an indicator on a per-question/answer/item basis, you could do this:

如果您想在每个问题/答案/项目的基础上维护一个指标,您可以这样做:

First, replace this code:

首先,替换此代码:

var id = $(this).parents('div.answer').attr('id').split('_')[1];

With this:

var parent = $(this).parents('div.answer'); // get the parent div
if(parent.data('voting')) return false; // if voting, return
parent.data('voting', true); // if not, update the marker
var id = parent.attr('id').split('_')[1]; // get the id

Then inside both post callbacks, add this:

然后在两个帖子回调中,添加:

parent.data('voting', false); // done voting, set back to false

In this case we'd be using jQuery's data to store the voting status of a particular question/answer/item inside the containing DIV and updating it accordingly whenever something happens.

在这种情况下,我们将使用jQuery的数据来存储包含DIV内的特定问题/答案/项目的投票状态,并在发生任何事情时相应地更新它。

Hope this helps.

希望这可以帮助。

#2

Bind the event once using jQuery.fn.one then bind it again in the callback function

使用jQuery.fn.one绑定事件一次,然后在回调函数中再次绑定它

myFunc = function() {
   $.post(url, data, function(data){
      $('#button').one('click', myFunc)
   }
};

$('#button').one('click', myFunc);

#3

use the begin and end AJAX events to set a global var stating busy until the request is complete. Show a message that the action is executing to advise the user too.

使用开始和结束AJAX事件来设置全局变量,指示忙,直到请求完成。显示正在执行操作的消息,以便建议用户。

Jquery has a load of functions to help if it suits your app:

如果它适合你的应用程序,Jquery有很多功能可以提供帮助:

http://docs.jquery.com/Ajax

#1