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);}};
}