Ps: 例如搜尋框，使用者在輸入的時候使用change事件去呼叫搜索，如果用戶每一次輸入都去搜尋的話，那得消耗多大的伺服器資源，即使你的伺服器資源很強大，也不帶這麼玩的。
其中一個解決方案就是每次使用者停止輸入後，延遲超過500ms時，才去搜尋此時的String，這就是防手震。
原理：將若干個函數呼叫合成為一次，並在給定時間過去之後只被呼叫一次。
程式碼實作：
function debounce(fn, delay) {
// 维护一个 timer，用来记录当前执行函数状态
let timer = null;
return function() {
// 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
let context = this;
let args = arguments;
// 清理掉正在执行的函数，并重新执行
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
}
let flag = 0; // 记录当前函数调用次数
// 当用户滚动时被调用的函数
function foo() {
flag++;
console.log('Number of calls: %d', flag);
}
// 在 debounce 中包装我们的函数，过 2 秒触发一次
document.body.addEventListener('scroll', debounce(foo, 2000));
#debounce函數封裝後，傳回內部函數每一次事件被觸發，都會清除目前的
timer#然後重新設定逾時並呼叫。這會導致每一次高頻事件都會取消前一次的超時調用，導致事件處理程序不能被觸發只有當高頻事件停止，最後一次事件觸發的超時調用才能在
delay時間後執行
#另一個解決方案比 防手震 要寬鬆些，這時我們不想用戶一味的輸入，而是給用戶一些搜尋提示，所以在當中限制每過500ms就查詢一次此時的String，這就是節流。
原理：節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。
程式碼實作有兩種，一種是時間戳，另一種是計時器
1）時間戳實作：
function throttle(func, delay){
let prev = Date.now();
return function(){
const context = this;
const args = arguments;
const now = Date.now();
if(now - prev >= delay){
func.apply(context, args);
prev = Date.now();
}
}
}當高頻事件觸發時，第一次應該會立即執行（給事件綁定函數與真正觸發事件的間隔如果大於delay的話），而後再怎麼頻繁觸發事件，也都是會每delay秒才執行一次。而當最後一次事件觸發完畢後，事件就不會再被執行了。
2）定時器實作：
當觸發事件的時候，我們設定一個計時器，再觸發事件的時候，如果計時器存在，就不執行；直到delay秒後，定時器執行執行函數，清空定時器，這樣就可以設定下個定時器。
fucntion throttle(func, delay){
let timer = null;
return funtion(){
let context = this;
let args = arguments;
if(!timer){
timer = setTimeout(function(){
func.apply(context, args);
timer = null;
}, delay);
}
}
}當第一次觸發事件時，肯定不會立即執行函數，而是在delay秒後才執行。
之後連續不斷觸發事件，也會每delay秒執行一次。
當最後一次停止觸發後，由於定時器的delay延遲，可能還會執行一次函數。
3）綜合使用時間戳與定時器，完成一個事件觸發時立即執行，觸發完畢還能執行一次的節流函數
function throttle(func, delay){
let timer = null;
let startTime = Date.now();
return function(){
let curTime = Date.now();
let remaining = delay - (curTime - startTime);
const context = this;
const args = arguments;
clearTimeout(timer);
if(remaining <= 0){
func.apply(context,args);
startTime = Date.now();
}else{
timer = setTimeout(func, remaining);
}
}
}需要在每個delay時間中一定會執行一次函數，因此在節流函數內部使用開始時間、當前時間與delay來計算remaining，當remaining <= 0時表示該執行函數了，如果還沒到時間的話就設定在remaining時間後再觸發。當然在remaining這段時間中如果又一次發生事件，那麼會取消當前的計時器，並重新計算一個remaining來判斷當前狀態。
相關文章：
javascript函數的節流throttle與防抖debounce詳解
以上是JS簡單實現防手震 - debounce和節流 - throttle的詳細內容。更多資訊請關注PHP中文網其他相關文章！
