控制点击频率

Posted 2020-10-03

问题描述：给一个按钮绑定点击事件，发ajax请求，向服务器提交数据和从服务器获取数据。用户在较短时间内多次点击按钮，请求混乱，服务器来不及处理。
预期结果：我们希望第1次请求结束后，才可以发第2次请求。
解决方案：
1、利用jQuery中的ajax方法

beforeSend: function() {
  $(‘#submit_btn‘).off(‘click‘);
},
complete: function() {
  $(‘#submit_btn‘).on(‘click‘);
}

2、设置一个提交标志

//初始状态，可以提交；
var flagSubmit = true;

//提交期间，如果flagSubmit为false，就禁止提交；
if(!flagSubmit) return false;
//提交期间，锁住flagSubmit；
flagSubmit = false;

//提交成功后，释放flagSubmit。
flagSubmit = true;

3、借助高阶函数debounce去抖
核心思想是，设置定时器，延迟期间，锁定提交行为；延迟结束后，可以继续点击提交。