先上結論：
防抖 ：只執行最后一次 (常用語輸入框) 節流： 控制執行的次數 （常下拉滾動條時進行資料請求） 防抖代碼： （這是未封裝的，防抖代碼和業務代碼寫在一起了）<body>
<input type="text" />
<script>
// 防抖：用戶觸發事件過于頻繁，只要最后一次事件的操作
let inp = document.querySelector('input')
//定義全域變數 t
let t = null
inp.oninput = function () {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
console.log(this.value)
}, 500)
}
</script>
</body>
這是封裝后的，同時利用了閉包：
<body>
<input type="text" />
<script>
let inp = document.querySelector('input')
inp.oninput=debounce(function(){
console.log(this.value);
},500)
// 封裝防抖函式
//fn 為傳入的業務邏輯 delay 為延遲時間
function debounce(fn,delay){
let t = null;
return function () {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
// 使用call 改變 this的指向 如果不更改的話，再上面呼叫的 this.value 中this 指向為window
fn.call(this);
}, delay)
}
}
</script>
</body
節流代碼：（這是未封裝的，防抖代碼和業務代碼寫在一起了）
<style> body { height: 2000px; } </style> <script> // 節流 控制執行的次數 let flag =true window.onscroll=function(){ if(flag){ setTimeout(()=>{ console.log("hello world"); flag=true },500) } flag =false } </script>
和防抖類似，也進行了封裝，代碼如下：
<style> body { height: 2000px; } </style> <script> window.onscroll = throttle(function () { console.log('hello world') }, 500) function throttle(fn, delay) { let flag = true return function () { if (flag) { setTimeout(() => { flag = true // 使用call 改變 this的指向 fn.call(this) }, delay) } flag = false } } </script>
這里解釋一下flag 的作用，按照執行順序講下吧，從上到下分別為（1 2 3）：
（先執行的）第一個 let flag = true； 先定義flag,用來判斷使用運行定時器，相信都看得懂，廢話不多說，
（第二執行）第三個 呼叫定時器之后，需要將 flag 暫時定義為 flag 避免短時間再次觸發定時器，
（第三個執行的） 第二個 先講下，為啥第二個最后一個執行，這是因為 js 的同步與異步， js會先執行同步任務，碰到異步任務 會加到 另外一個執行緒（只是這樣解釋，其實不是） 等待其運行結束后，再進行呼叫，要是不明白，可以先去百度搜索下，同步與異步 的概念，
這樣的話，在定時器 運行結束后，flag 就被改為了 true 用來等待 下次激活使用，
如有解釋不對的地方，還望指正，
本文來自博客園，作者：一粒金燦米，轉載請注明原文鏈接：https://www.cnblogs.com/zy-feng/p/16819631.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/519080.html
標籤：其他
上一篇：學習筆記——Vue
下一篇：函式柯里化實作sum函式