【校招VIP】出品：校招java衝刺一線之專業課考點梳理(2022)
阿新 • • 發佈：2022-05-19
一、防抖debounce（多次觸發 只執行最後一次）
- 作用：高頻率觸發的事件,在指定的單位時間內，只響應最後一次，如果在指定的時間內再次觸發，則重新計算時間
- 類似於回城8秒，如果回城中被打斷，再次回城需要再等8秒
- 應用場景：搜尋提示；搜尋時不斷輸入，用防抖來節約請求資源
<body> <input type="text"> <script> function debounce(callback, delay) { let timer return function () { // 閉包 clearTimeout(timer) // 清除上次的timer timer = setTimeout(() => { callback(...arguments) }, delay) } } function say_hello(str) { // 事件觸發函式 console.log(str); } const new_say_hello = debounce(say_hello, 1000) // 重構事件觸發函式 const input = document.querySelector('input') input.addEventListener('keyup', e => { new_say_hello(e.target.value) }) </script> </body>
二、防抖throttle（規定時間內 只觸發一次）
- 作用：限定事件在一定時間內只能執行一次
- 節流類似於平A,受攻速的限制
- 應用場景：監聽滾動條滾動載入資料，即邊滾動邊載入;滑鼠多次點選只觸發少次
<body> <button>點選</button> <script> function throttle(callback, delay) { let timer // 節流閥 return function () { // 閉包 if (!timer) { timer = setTimeout(() => { callback(...arguments) timer = null // 回撥函式執行完放開節流閥 }, delay) } } } function say_hello(str) { console.log(str); } const new_say_hello = throttle(say_hello, 1000) const btn = document.querySelector('button') btn.addEventListener('click', e => { new_say_hello('點選了') }) </script> </body>