织梦网站栏目,江苏省建设执业资格中心网站,二级备案域名,云南照明网站建设目录
一、避免重复执行的多种情况
#xff08;一#xff09;根据用途
#xff08;二#xff09;根据用户操作
二、具体实现
#xff08;一#xff09;“Ajax ”结合disabled (防止多次请求)#xff0c;避免多次点击重复请求
1. 适用场景
2. 解决办法
3. 示例
一根据用途
二根据用户操作
二、具体实现
一“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_runtrue; // 闭包在定时方法作用域外部。会保留在返回的函数的闭包中即保留上一次事件的处理状态直到定时器完成执行。return function (e) {if(can_run){ // 用can_run变量控制是否执行fn函数fn.apply(this, arguments);can_runfalse; setTimeout(() {can_runtrue;}, timeint ? timeint : 500);}};
}
