防抖和節流
函式節流和函式防抖，兩者都是優化高頻率執行js代碼的一種方法
防抖（debounce）：只要不是最后一次觸發就不會發送異步請求（定時器實作），
節流（throttle）：只要第一次請求發送后，回應沒回來，就不能發送第二次請求（開關變數實作），
防抖
現象
看下以下代碼（模擬客戶端向服務器發送請求）：
window.onscroll = function () {
console.log("發送agax請求，加載更多...");
};
可以看到，我僅僅向下滑動了3次，向上滑動了三次就發出了將近70次請求，
解決
提前準備一個定時器，每次觸發事件時都去看看定時器是不是空，不是的話取消之前的定時器，是的話就開始新一輪的等待，
var timer;
window.onscroll = function () {
//如果當前timer不是空，說明前邊有一個等待的請求還未發送，還未發送，就停止前面的等待，
if (timer !== undefined) {
clearTimeout(timer);
}
// 從新開始下一輪的等待
timer = setTimeout(function () {
// 只有當200ms內未發生滾動是才發送正式的ajax請求;
console.log("發送agax請求，加載更多...");
}, 200);
};
節流
現象
看下以下代碼（模擬客戶端向服務器發送請求）：
<body style="height: 2000px">
<button
id="btn"
style="position: fixed; right: 0; bottom: 200px"
onclick="clickMe()"
>
加載更多
</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
console.log("發送請求加載更多資料....");
console.log("加載完成");
};
</script>
</body>
可以發現如果不加以限制的話，快速點擊，也會發出很多請求
解決
提前準備一個開關變數，當第一次點擊發送請求時，允許發送，但是要把開關關閉，點擊不再發送請求，直到請求回來后把開關打開，這次又能重新發送請求，
<body style="height: 2000px">
<button
id="btn"
style="position: fixed; right: 0; bottom: 200px"
onclick="clickMe()"
>
加載更多
</button>
<script>
var canClick = true;
var btn = document.getElementById("btn");
btn.onclick = function () {
// 如果當前開關開著說明可以單擊
if (canClick) {
// 先關閉開關
canClick = false; // 再發送請求
console.log("發送請求加載更多資料....");
// setTimeout(function () {
console.log("加載完成"); // 在請求的回呼函式結尾重新打開開關允許再次單擊發送請求
canClick = true;
// }, 3000);
} else {
}
};
</script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/23431.html
標籤：其他
上一篇：【Django】有效解決postman進行post請求時服務器回傳500錯誤
下一篇：每天補充一點 一些零碎的小知識點