資訊專欄INFORMATION COLUMN
摘要：簡單的防抖動處理，一秒內點擊一次向服務器請求數據點擊按鈕向后臺請求數據優化點另外一些防抖動的小技巧，請參考封裝好的簡單防抖動函數防抖動函數要執行的函數，間隔毫秒數調用現成的工具庫防抖動節流
1. 簡單的防抖動處理，一秒內點擊一次
var timer = null;
$(".coupon").click(function(){
if (timer) {
return;
}
timer = true;
setTimeout(function() {
timer = false;
}, 1000);
...
})
2. 向服務器請求數據
點擊按鈕向后臺請求數據 優化點：
var running = false;
$(".btn").on("click", function() {
if (running) {
return;
}
running = true;
$.ajax(url, {
complete: () => {
running = false;
}
})
});
另外一些防抖動的小技巧，請參考：
http://blog.csdn.net/crystal6...；
https://jinlong.github.io/201...
// 防抖動函數 fn要執行的函數，timeout間隔毫秒數
function debounce(fn, timeout) {
let last = null;
return function() {
if (last) {
return last.result;
}
setTimeout(() => { last = null; }, timeout || 1000);
const result = fn.apply(this, arguments);
last = { result };
return result;
};
}
//調用
btn.addEventListener("click", debounce(function() {
...
}, 1000));
4. 現成的工具庫Loadash
http://www.css88.com/doc/loda...
防抖動：
_.debounce
節流：
_.throttle
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52519.html
摘要：簡單的防抖動處理，一秒內點擊一次向服務器請求數據點擊按鈕向后臺請求數據優化點另外一些防抖動的小技巧，請參考封裝好的簡單防抖動函數防抖動函數要執行的函數，間隔毫秒數調用現成的工具庫防抖動節流 1. 簡單的防抖動處理，一秒內點擊一次 var timer = null; $(.coupon).click(function(){ if (timer) { return; } ...
摘要：它和防抖動最大的區別就是，節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。 防抖動 其核心內涵在于延遲處理，也就是將一系列的事件處理程序全部延遲，保障推送進來的第一次事件處理 var debounce = function(fn,delay,mustRunDelay){ var timer = null; var t_start; ...
摘要：起因面試被問到了節流和防抖動自己對這兩個的概念比較模糊都不知道回答了什么鬼從語文和英語學起首先先看字面意思節流的意思就是水龍頭關小點頻率不要那么高防抖動這根彈簧你不要來回蹦了我就要你最后停下來的沒有發生形變的那一刻舉個例子節流在改變窗口大小 起因 面試被問到了節流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼 從語文和英語學起 首先, 先看字面意思:節流(throttl...
閱讀 2061·2023-04-25 17:48
閱讀 3578·2021-09-22 15:37
閱讀 2932·2021-09-22 15:36
閱讀 5864·2021-09-22 15:06
閱讀 1634·2019-08-30 15:53
閱讀 1422·2019-08-30 15:52
閱讀 706·2019-08-30 13:48
閱讀 1116·2019-08-30 12:44
