js 防抖節流
阿新 • • 發佈：2021-12-01
防抖：比如一個點選事件頻繁觸發只執行最後一次
節流：頻繁觸發固定時間執行（設定一秒執行一次，10秒點一千下還是執行10次）
<script> window.onload = function(){ var btn = document.getElementById("btn"); function debounce(fn,delay){ let timer //藉助閉包 return function() { if(timer){ //為空為宣告 clearTimeout(timer) //宣告為定時器沒執行就 } timer = setTimeout(fn,delay) // 宣告為定時器 } } // 然後是舊程式碼 function showTop() { console.log('被點選') } // 第一種 通過點選事件 // btn.onclick = debounce(showTop,1000) function throttle(fn,delay){ let valid = true returnfunction() { if(!valid){ console.log('重複滾動'+valid) return false } // 工作時間，執行函式並且在間隔期內把狀態位設為無效 valid = false setTimeout(() => { fn() valid = true; //一秒一次函式執行完成讓重複滾動不組織}, delay) } } function showTop () { console.log('到點執行'); } btn.onclick = throttle(showTop,1000) } </script> <body> <button id="btn">點選</button> </body>
https://segmentfault.com/a/1190000018428170