### 防抖：對于短時間內連續觸發的事件，比如window.scroll事件，防抖就是讓這個連續性的事件在指定的時間內觸發，降低觸發頻率
```
1. 案例：窗口事件，以及滾動事件等只需要判斷最后一次結果的事件
```
function test(){
let body \= document.body.scrollTop
let documentElement \= document.documentElement.scrollTop
console.log('滾動條滾動的位置：' + body, documentElement)
}
function debounce(fn, delay) {
let timer \= null
return function() {
if (timer) {
clearTimeout(timer)
}
timer \= setTimeout(fn, delay)
}
}
window.onscroll \= debounce(test, 500)
### 節流：節流和防抖非常像，區別在于防抖如果一直在快速觸發，則函數不會執行，而節流則一定會在一定時間內執行一次，不管觸發得頻繁不頻繁
1. 案例：input輸入值時動態查詢服務端數據，即使快速搜索時也會在設置的時間段內執行一次函數
```
const input \= document.querySelector('#input')
input.oninput \= throttle(function() {
console.log(input.value)
}, 500)
function throttle(fn, delay) {
let valid \= true
return function() {
if (!valid) return
valid \= false
setTimeout(() \=> {
fn()
valid \= true
}, delay)
}
}
```
### 防抖與節流：核心是可以使用setTimout函數來定時執行函數，在函數未執行前清除了其定時器則不會執行
