Javascript 防止 ajax 调用两次触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26475445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent ajax call from firing twice
提问by user544079
I have an ajax call
我有一个ajax调用
$('#button1').on('click', function(e){
$.ajax({
url: url,
type: 'POST',
async: true,
dataType: 'json',
enctype: 'multipart/form-data',
cache: false,
success: function(data){
},
error: function(){}
});
e.stopImmediatePropagation();
return false;
});
Now here the response is received after 10 minutes . So the ajax call is called multiple times. Why does this happen / how can we ensure that ajax call is called only once?
现在这里在 10 分钟后收到响应。所以ajax调用被多次调用。为什么会发生这种情况/我们如何确保仅调用一次 ajax 调用？
回答by Dave
An alternative to disabling the button would be to use the .one()method and re-bind the event handler after callback:
禁用按钮的另一种方法是使用.one()方法并在回调后重新绑定事件处理程序：
var clickHandler = function(e){
$.ajax({
url: url,
type: 'POST',
async: true,
dataType: 'json',
enctype: 'multipart/form-data',
cache: false,
success: function(data){
$('#button1').one('click', clickHandler);
},
error: function(){}
});
e.stopImmediatePropagation();
return false;
}
$('#button1').one('click', clickHandler);
回答by George John
I was facing the same issue and it works when I set async: false.
Sample code will be like this
我遇到了同样的问题，当我设置async: false. 示例代码将是这样的
$('#button1').on('click', function(e){
$.ajax({
url: url,
type: 'POST',
async: false,
dataType: 'json',
enctype: 'multipart/form-data',
cache: false,
success: function(data){
},
error: function(){}
});
});
回答by user544079
As per the answer by Brennan,
根据布伦南的回答，
$('#button1').on('click', function(e){
$('#button1').attr('disabled', 'disabled');
$.ajax({
url: url,
type: 'POST',
async: true,
dataType: 'json',
enctype: 'multipart/form-data',
cache: false,
success: function(data){
$('#button1').removeAttr('disabled');
},
error: function(){}
});
e.stopImmediatePropagation();
return false;
});
Here the button will be disabled and will be enabled on success
这里按钮将被禁用，并将在 success
回答by Pankaj Shinde
Simply call .off()right before you call .on().
只需.off()在您致电之前立即致电.on()。
This will remove all event handlers:
这将删除所有事件处理程序：
$(element).off().on('click', function() {
// function body
});
To only remove registered 'click' event handlers:
仅删除已注册的“点击”事件处理程序：
$(element).off('click').on('click', function() {
// function body
});
