在javascript中，防手震是指觸發高頻事件後n秒內函數只會執行一次，如果n秒內高頻事件再觸發，重新計算時間；節流是指當持續觸發事件時，保證在一定時間內只呼叫一次事件處理函數。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
觸發高頻事件後n秒內函數只會執行一次，如果n秒內高頻事件再觸發，則重新計算時間
function debounce(fn) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout);
// 每当用户输入的时候把前一个 setTimeout clear 掉
timeout = setTimeout(() => {
// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内
// 如果还有字符输入的话，就不会执行 fn 函数
fn.apply(this, arguments);
//因为sayHi函数是在全局中运行，this默认指向了window
//所以要用apply将inp的this传入
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖舉個例子，假如你有一個需求是使用者在input框中輸入一串字元後，自動發出ajax請求，如果不做防手震，則使用者每次改變字串(刪掉字元或輸入新字元)都會傳送一次請求，但是如果做防手震處理，當使用者輸入字元後，過了0.5秒也沒有改變字串（這大機率表示使用者已經完成字串輸入），則發送請求，如果在0.5秒內改變了字串（這大概率表示當前字串不是用戶要輸入的最終字串），則暫不發送請求，繼續重新計算0.5秒，直到用戶停頓超過了0.5秒，再發送請求。
當持續觸發事件時，保證在一定時間內只呼叫一次事件處理函數。所以節流會稀釋函數的執行頻率
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
canRun = false; // 立即设置为false
setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次
//循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));debounce(防震)
debounce(防震)
## search搜尋聯想，使用者在不斷輸入值時，用防手震來節約請求資源。
滑鼠不斷點擊觸發，mousedown(單位時間內只觸發一次)
###監聽滾動事件，例如是否滑到底部自動加載更多，用throttle來判斷#############【推薦學習：###javascript高級教程###】###以上是javascript中什麼是防手震和節流的詳細內容。更多資訊請關注PHP中文網其他相關文章！
