函数防抖：在 n 秒内重新触发，会重新开始计算时间
实现：通过 setTimeout 和 clearTimeout 实现
应用场景：按钮点击事件/input事件，防止用户多次重复提交
//简易写法
let timeout;
$(".xx").click(function() {
clearTimeout(timeout)
timeout = setTimeout(() => {
//在此处写调用的方法，可以实现仅最后一次操作生效
}, 1000)
})
function debounce (fn, time) {
let timer = null
// 闭包
return () => {
// 每次都会重新开始计算时间
clearTimeout(timer)
timer = setTimeout(() => {
fn()
}, time)
}
}
function sayDebounce() {
console.log('我是防抖，每次触发我都会重新计算一次时间')
}
btn.onclick = debounce(sayDebounce, 1000);
//或$("#btn").on('click', debounce(confirmExchange, 1000))
函数节流：在 n 秒中只执行一次
实现：通过 setTimeout 执行
应用场景：
- 鼠标/触摸屏的mouseover/touchmove事件
- 页面窗口的resize事件
- 滚动条的scroll事件
// 初步实现
const throttle = function (fn, time) {
let canRun = true
// 闭包
return () => {
if (canRun) {
canRun = false
setTimeout(() => {
canRun = true
fn()
}, time)
}
}
}
function sayThrottle() {
console.log('我是节流，我在固定的时间内执行一次')
}
window.onscroll = throttle(sayThrottle, 1000)
区别：一定时间内任务执行的次数。比如一个事件每1s触发很多次，平均每10ms触发一次。节流，假设时间间隔为100ms，在100ms内只能执行一次事件回调函数，1s内函数的调用次数为：1000 /100 = 10次防抖，假设时间间隔为100ms，时间触发的间隔必须要大于100ms，才调用回调函数。因为触发间隔=10ms < 100ms，1s内函数的调用次数为：0;
