前端性能优化———防抖和节流
函数防抖（类似于setTimeout）
概念：函数防抖（debounce），就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数延执行时间。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防抖函数debounce</title>
</head>
<body>
<button id="btn">提交成功</button>
<script>
function success(e){
console.log('提交成功')
}
//防抖函数
const debounce = (fn,delay) =>{ //1
let timer =null
return (...args) =>{ //4
clearTimeout(timer) //5
timer = setTimeout(() =>{ //3
//fn里面this的作用域绑定好，不要被外界修改.
fn.apply(this,args) //6
},delay)
}
}
const oDebounce = debounce(success,1000) //2
let btn =document.getElementById('btn')
btn.addEventListener('click',oDebounce)
</script>
</body>
</html>
函数节流（类似于setInterval）
概念：每隔一段时间执行一次
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数节流throttle</title>
</head>
<body>
<button id="btn">提交成功</button>
<script>
function success(e){
console.log('提交成功')
}
//函数节流：每隔一段时间执行一次
const throttle = (fn,delay) =>{ //1
let flag = true //5
return (...args) => { //4
if (!flag) return
flag = false //6
setTimeout(() =>{ //3
//绑定fn中this的作用域，防止fn被调用的时候this作用域被修改了
fn.apply(this,args)
flag = true
},delay)
}
}
const oThrottle=throttle(success,2000) //2
let btn =document.getElementById('btn')
btn.addEventListener('click',oThrottle)
</script>
</body>
</html>
教程地址：https://www.bilibili.com/video/BV1a4411q7Jx/?spm_id_from=trigger_reload
关于定时器的疑惑
js默认机制，如果在定时器还没有执行完的时候，再次去调用定时器执行的话，第二次调用的方法，定时器就会覆盖掉前一次的定时器。
在每次进入function中，都会调用setTimeout,但是不清理定时器，就调用了多次定时器。
你每点击一次，就会产生一个定时器，而这些定时器是独立运行的，但是他们做的事情却又都是一件事，也就是说同时几个定时器都在做一件事，类似于多线程那种。当一个人做一件事，和很多人同时做一件事，那后者就会让你感觉怎么那么快了。
参考地址：https://q.cnblogs.com/q/97298/