1、防抖是什么 ？什么是节流 ？以及应用场景
先解释下什么是防抖，防抖就是当触发一个事件不会立即执行，会等待 n 秒后再执行该事件，如果在等待 n 秒期间你再次出发，则会重新计时，也就是说防抖不管你触发多少次这个事件，永远只有一次在执行，并且执行的是最后一次，
登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
scroll 事件，每隔一秒计算一次位置信息等 浏览器播放事件，每个一秒计算一次进度信息等 需要节流
2、先来看防抖代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">click</button>
<script>
let btn = document.getElementById('btn')
function debounce(fn, delay = 200) {
let timer = null
return function (...args) {
if (timer) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(() => {
fn.apply(this, args)
clearTimeout(timer)
timer = null
}, delay)
}
}
btn.addEventListener('click', debounce((e) => {
console.log(e.target)
}, 1000))
</script>
</body>
</html>
什么是节流：在触发任务的第一时间执行任务，并且设定定时器，如果在该定时器还未结束的时候还有触发任务的，也不执行，实现节流的核心是时间间隔，在设定的时间间隔内如果还有同样的任务进来，则不执行。
3、节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">clickMe</button>
</body>
<script>
let btn = document.getElementById('btn')
function throttle(fn, delay = 200) {
let flag = true
return function (...args) {
if (!flag) {
return
}
flag = false
setTimeout(() => {
fn.apply(this, args)
flag = true
}, delay)
}
}
btn.addEventListener('click', throttle((e) => {
console.log(1)
}, 1000))
</script>
</html>