单机按钮触发ajax请求,JQuery中阻止按钮连续提交ajax请求

如果我没不加代码限制,一个按钮被连续点按,可以一直触发心的ajax请求,显然这不是我们想要的效果。我们希望的是,这一次点击按钮出发一次ajax后,等这次ajax的回调函数执行完成后,才允许用户进行二次点击并触发ajax请求。

针对上述的请求,我们有下面的几种方式:

在触发ajax请求后,回调函数执行完成前,我们禁用这个点击按钮,那用户在这段时间内就没办法使用这颗按钮,在回调函数执行后,恢复该按钮。

在触发ajax请求后,回调函数执行完成前,我们将js函数中的flag置为0,这样子让用户再次点击按钮时,无法触发$.ajax,等到回调函数执行成功,我们将flag重新置为1,这样子$.ajax 就又可以执行了。

代码如下所示:

$(function(){

var flag=1;

function ajaxTest(){

if(flag){

$.ajax({

url: "test.php",

type: "POST",

data: 456,

dataType: 'json',

beforeSend: function(){

flag=0 },

success: function (result) {

if(result) {

console.log(result);

}

flag = 1;

}

});

}

}

$('#btn').bind('click', function() {

ajaxTest();

});

});