Frontend - 防止多次请求，避免重复请求
目录
一、避免重复执行的多种情况
（一）根据用途
（二）根据用户操作
二、具体实现
（一）“Ajax ”结合disabled (防止多次请求)，避免多次点击重复请求
1. 适用场景
2. 解决办法
3. 示例
（二）unbind 和 bind（防止内存溢出），避免长按重复操作
1. 适用场景
2. 解决办法
3. 注意
4. 示例
（1）普通写法，会出现问题：长按时，会多次执行弹出框动作
（2）进阶写法，解决长按时多次执行的问题
（3）针对click、keydown（与keyup同理）
（三）setTimeout 防抖 ，避免多次重复操作
（四）setTimeout 节流 ，避免多次重复操作
一、避免重复执行的多种情况
（一）根据用途
1. 针对按钮点击事件：设置disable属性（执行第一次的操作）、利用bind和unbind（执行最后一次的操作）、loading（执行最后一次的操作）。
2. 针对输入框输入事件：防抖（执行最后一次的操作）
3. 针对滚动事件：节流（执行第一次的操作）
（二）根据用户操作
1. 针对无意识连续操作：利用bind和unbind、防抖、节流
2. 针对故意连续操作：设置disable属性、loading（当数据全部更新好了再让用户操作）
二、具体实现
（一）“Ajax ”结合disabled (防止多次请求)，避免多次点击重复请求
1. 适用场景
同时执行多次相同操作。例如，短时间内执行多次点击事件，进行多个ajax请求。
2. 解决办法
在执行操作后，立马禁用操作按钮；在完成请求后，恢复按钮的可用状态。
3. 示例
// 第一种
$('#id_ok').attr("disabled", true); // 禁用按钮，在"传递数据给后端"前（ajax里，放在beforeSend方法中）
$('#id_ok').attr("disabled", false); // 恢复按钮的可用状态，在 "前端渲染"后（ajax里，放在complete方法中）
// 第二种
$("#id_query_btn").attr({ disabled: "disabled" }); // 禁用按钮
$("#id_query_btn").removeAttr("disabled"); // 恢复按钮的可用状态
（二）unbind 和 bind（防止内存溢出），避免长按重复操作
1. 适用场景
在用户连续操作时，会重复请求多次。例如：点击时一直长按。
2. 解决办法
使用 unbind 和 bind，在用户连续操作时，只请求最后一次操作，前面重复的操作被 unbind 释放掉。
3. 注意
只是避免连续操作，但没有避免短时间内频繁操作。例如：点击时，只是避免了“长按”，但不能避免同时多次点击。
4. 示例
（1）普通写法，会出现问题：长按时，会多次执行弹出框动作
即，当一直长按时，keyup事件被多次绑定，执行多次事件。
$(document).keyup.(function(event){
alert(event.which); //显示按键对应的数字编号
})（2）进阶写法，解决长按时多次执行的问题
即，绑定keyup事件前，先解绑。
$("#id_ok").unbind("keyup").bind("keyup", function(event){
if (event.keyCode == 13) {
alert(event.keyCode);
}
})
（3）针对click、keydown（与keyup同理）
$("#id_ok").unbind('click').bind('click', function () { } );（三）setTimeout 防抖 ，避免多次重复操作
// 第一种 JavaScript的addEventListener
document.getElementById("id_ok").addEventListener("click", fn_debounce(excute_data, 1000));
// 第二种 jQuery的on()方法
$('#id_ok').on('click', fn_debounce(excute_data, 1000));
// 需执行的事件
function excute_data() {alert("测试"); }
/**
* 防抖：某个时间期限（500毫秒）内，事件只执行一次。
* @fn [function] 需要防抖的函数
* @timeint [number] 毫秒，防抖期限
*/
function fn_debounce(fn, timeint) {
let timeout; // 闭包，在定时方法作用域外部。会保留在返回的函数的闭包中，即保留上一次事件的处理状态，直到定时器完成执行。
return function (e) {
clearTimeout(timeout);// 清除上一次执行保留的timeout计时器
timeout = setTimeout(() => {fn.apply(this, arguments);}, timeint ? timeint : 500); // 对该事件何时执行，重新设定计时器
};
}（四）setTimeout 节流 ，避免多次重复操作
// 第一种 JavaScript的addEventListener
document.getElementById("id_ok").addEventListener("click", fn_throttle(excute_data, 1000));
// 第二种 jQuery的on()方法
$('#id_ok').on('click', fn_throttle(excute_data, 1000));
// 需执行的事件
function excute_data() {alert("测试"); }
/**
* 节流：某个时间期限（500毫秒）内，事件只执行一次。
* @fn [function] 需要节流的函数
* @timeint [number] 毫秒，节流期限
*/
function fn_throttle(fn, timeint) {
let can_run=true; // 闭包，在定时方法作用域外部。会保留在返回的函数的闭包中，即保留上一次事件的处理状态，直到定时器完成执行。
return function (e) {
if(can_run){ // 用can_run变量控制是否执行fn函数
fn.apply(this, arguments);
can_run=false;
setTimeout(() => {can_run=true;}, timeint ? timeint : 500);
}
};
}