概念理解
防手震：在事件觸發n秒後再執行回調，如果在這n秒內又被觸發，則重新計時。
節流：規定在一個單位時間內，只能觸發一次函數。如果這個單位時間內觸發多次函數，只有一次生效。
相關推薦：《javascript高階教學》
js函數防手震與節流的差異：
函數防抖是某一段時間只執行一次，而函數節流是間隔時間執行。
個人踩坑
1、透過理解函數防手震與函數節流的概念後，使用閉包實現函數防手震與節流，沒有考慮到對於節流，如果使用者在下次請求之前已輸入完畢，但是此時不會再進行請求，則會導致最後輸入的文字獲取其他事件改變不發請求，即漏請求，所以需要加一個setTimeout兜底函數，且在每次準備請求的時候，設一個flag，即是否已經發送請求，如果走了正常週期發送請求，改為true，否則即為false,走setTimout，讓setTimeout比剩餘事件略長一些，優先走節流定時器請求；
2、如果使用箭頭函數，則不需要儲存this。
程式碼實作
<div>
<div>
<input type="text" id="unDebounce">
</div>
<div>
<input type="text" id="debounce">
</div>
<div>
<input type="text" id="throttle">
</div>
</div>// 函数防抖节流
var elem1 = document.getElementById("unDebounce")
var elem2 = document.getElementById("debounce")
var elem3 = document.getElementById("throttle")
// 不防抖
function ajax1(value){
console.log("不防抖，不节流")
console.log(value)
}
elem1.addEventListener('keyup',function (e) {
ajax1(e.target.value);
})
// 防抖
function ajax2(value) {
console.log(value)
}
function debounce(func,delay){
console.log("函数防抖")
let timer = null;
return function(...args){
if(timer){
console.log("清除定时器")
clearTimeout(timer)
}
timer = setTimeout(()=>{
console.log("重新计时")
func.call(this,...args)
},delay)
}
}
let debounceFn = debounce(ajax2,1000)
elem2.addEventListener('keyup',function (e) {
debounceFn(e.target.value);
})
// // 节流
function ajax3(value){
console.log(value)
}
function throttle(func,delay){
console.log("函数节流")
let lastTime = 0;
let timer = null;
return function (...args) {
let flag = false ; // 还没发送数据
let now = +new Date().getTime();
if(timer){
clearTimeout(timer)
}
if(now-lastTime>=delay){
console.log("当前时间大于设定时间，开始执行函数")
func.apply(this,args)
console.log("time1",new Date().getTime())
lastTime = now;
flag = true; // 发送了数据
}else{
timer = setTimeout(()=>{
if(!flag){ // 如果没有发送数据成功，再走这个，兜底发送请求
func.apply(this,args)
console.log("time2",new Date().getTime())
}
},delay-(now-lastTime)+1000) // setTimeout多一些，优先执行周期性请求
}
}
}
let throttleFn = throttle(ajax3,5000)
elem3.addEventListener('keyup',function (e) {
throttleFn(e.target.value);
})以上是js如何實作函數防手震與節流的詳細內容。更多資訊請關注PHP中文網其他相關文章！
