点击时阻止多个AJAX请求
Blocking multiple AJAX requests on click
我有多个AJAX请求的问题。例如,有一个按钮,当用户点击它时,就会发出AJAX请求,并将记录输入数据库。然而,若用户非常快速地多次单击按钮,则会同时发出多个AJAX请求,这会导致同一记录被输入数据库两次。我尝试了async: false
或使按钮处于非活动状态,但它仍在发生。
JavaScript
var myObject = {
demoButton : function(thisIdentity) {
"use strict";
var myObj = this;
$(document).on('click', thisIdentity, function(e) {
e.preventDefault();
var trigger = $(this);
trigger.addClass('inactive_icon');
var param = trigger.attr("rel");
var item = param.split("_");
var section = trigger.attr("data-section");
$.ajax({
type: "POST",
url: "mod/check_login.php",
dataType: "json",
success: function(data)
{
if(data.job == 1)
{
$.post('mod/button_processing.php',{ id : item[0], job : item[1] }, function(data) {
var new_id = item[0] + '_' + data.job + '_' + item[2];
if (data.job != item[1]) {
if (data.job === 0) {
trigger.attr("rel", new_id);
if(section == 'postOpen')
{
trigger.css("color", "#677077");
}
else
{
trigger.css("color", "white");
}
myObject.updateCount(item[0]);
$.ajax({
type: "POST",
data : { aid : item[2], type : 1, pid : item[0] },
url: "mod/mark_notifications.php"
});
}
else if(data.job === 1)
{
trigger.attr("rel", new_id);
trigger.css("color", "red");
myObject.updateCount(item[0]);
$.post('mod/add_notification.php',{ pid : item[0], paId : item[2], type : 1 }, function(data) {
if(data.nid != false)
{
var action = 'like';
myObj.conn.sendMsg(item[2], data.nid, action);
}
}, 'json');
}
else if(data.job === 2)
{
mscAlert({
title: 'Error',
subtitle: 'Try some time later.',
okText: 'Close',
});
}
}
}, 'json');
trigger.removeClass('inactive_icon');
}
else if(data.job == 0)
{
var param = {'c': 2};
$('.element_to_pop_up').bPopup({
content: 'ajax',
contentContainer: '.content',
loadUrl: 'mod/filler.php',
loadData: param,
modalColor: '#fff',
positionStyle: 'fixed',
});
}
}
});
});
}, //other functions
}
$(function() { myObject.likeButton(".like"); }
HTML
<button class="like" //other attributes>Like</button>
如果请求相同,是否有任何方法可以阻止同时的AJAX请求已经在工作了吗?
任何建议或参考都将不胜感激。
如果你的服务器和网络运行得很快,而你的客户端"缓慢"双击启动ajax调用的按钮,那么你仍然会有两次调用。
您可以在用户进行两次相同的ajax调用之前强制超时。围绕ajax调用设置一个条件:
// ...
var $this = $(this);
if ($this.data('timeout') != undefined) {
$this.data('timeout', true);
setTimeout(function() { $this.removeData('timeout'); }, 1000);
$.ajax({
// ...
这用户将在一秒钟内第二次点击。如果你想让他再也不会点击,那么删除setTimeout。或者给他2000毫秒或更长的时间。或者,您可以再次从表单中的另一个事件中删除Data('timeout')(输入上的onchange()?)何时允许您的用户第二次发送数据。这一切都取决于你到底想做什么。
在点击监听器的开头添加一个检查将解决此问题:
var myObject = {
demoButton : function(thisIdentity) {
"use strict";
var myObj = this;
$(document).on('click', thisIdentity, function(e) {
e.preventDefault();
if (window.inAjax) {
return false;
}
window.inAjax = true;
var trigger = $(this);
trigger.addClass('inactive_icon');
var param = trigger.attr("rel");
var item = param.split("_");
var section = trigger.attr("data-section");
$.ajax({
type: "POST",
url: "mod/check_login.php",
dataType: "json",
success: function(data)
{
if(data.job == 1)
{
$.post('mod/button_processing.php',{ id : item[0], job : item[1] }, function(data) {
var new_id = item[0] + '_' + data.job + '_' + item[2];
if (data.job != item[1]) {
if (data.job === 0) {
trigger.attr("rel", new_id);
if(section == 'postOpen')
{
trigger.css("color", "#677077");
}
else
{
trigger.css("color", "white");
}
myObject.updateCount(item[0]);
$.ajax({
type: "POST",
data : { aid : item[2], type : 1, pid : item[0] },
url: "mod/mark_notifications.php"
});
}
else if(data.job === 1)
{
trigger.attr("rel", new_id);
trigger.css("color", "red");
myObject.updateCount(item[0]);
$.post('mod/add_notification.php',{ pid : item[0], paId : item[2], type : 1 }, function(data) {
if(data.nid != false)
{
var action = 'like';
myObj.conn.sendMsg(item[2], data.nid, action);
}
}, 'json');
}
else if(data.job === 2)
{
mscAlert({
title: 'Error',
subtitle: 'Try some time later.',
okText: 'Close',
});
}
}
window.inAjax = false;
}, 'json');
trigger.removeClass('inactive_icon');
}
else if(data.job == 0)
{
var param = {'c': 2};
$('.element_to_pop_up').bPopup({
content: 'ajax',
contentContainer: '.content',
loadUrl: 'mod/filler.php',
loadData: param,
modalColor: '#fff',
positionStyle: 'fixed',
});
}
}
});
});
}, //other functions
}
$(function() { myObject.likeButton(".like"); }
将按钮设置为在单击时立即禁用可以解决此问题。
please wait..
",并删除onclick(如果有)。2.如果您只是在没有任何验证的情况下提交表单(如onsubmit='return validation()'
),那么第1点也会起到同样的作用。
相关文章:
- ajax请求的顺序总是不同的
- 从ajax请求中获取javascript对象
- Ajax请求文档就绪会导致jquery加载缓慢
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- JavaScript代码未正确检查ajax请求
- "日期“;AJAX请求返回的类型值未定义
- 在等待ajax请求时显示微调器并禁用页面
- 跨域ajax请求
- Ajax请求返回空的数据字符串,但首先得到了正确的数据
- Javascript-如何让脚本与Ajax请求的数据一起运行
- ajax请求成功,但可以'我看不到我的数据
- 如何将给定的curl命令复制为jquery ajax请求
- 为什么我能够从javascript控制台发送跨域ajax请求
- 一台特定计算机的Ajax请求数据未定义/失败
- 获取ajax请求的请求头
- 原型Ajax请求参数为嵌套json
- 可以't从AJAX请求中筛选数据
- jQuery Mobile Collapse上的AJAX请求
- 暂停函数执行流程,直到ajax请求完成