首先我们要了解一下防抖节流是干什么用的
他们都是前端性能优化的一种手段
防抖: 他是持续触发的时候不执行, 不触发的一定时间后才执行
节流: 持续触发也执行，只不过，执行的频率变低了
他们大多用在电商项目中
防抖
当事件被触发 n 秒后再执行回调, 如果在n秒内有被触发, 则重新计时
使用场景: 频繁触发按钮点击事件, input框搜索 开始手撕防抖
<!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>
<div>
<input type="text">
</div>
<script>
let time = null
// 获取input框,并注册input事件
document.querySelector('input').addEventListener('input', function(){
// 每次监听到有输入就删除定时器
clearTimeout(time)
// 开启定时器
time = setTimeout(()=> {
console.log(this.value);
}, 1000)
})
</script>
</body>
</html>
节流
规定在一个单位时间内只能触发一次函数, 如果在单位时间内触发多次, 只执行一次
使用场景: 下拉加载更多 ( 无线滚动事件 ) , 浏览器的resize , scroll 事件, 鼠标持续触发事件
开始手撕节流
<!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>
<script>
let oldTime = +new Date()
window.addEventListener('scroll',(e)=>{
const newTime = +new Date()
const scrollTop = document.body.scrollTop+document.documentElement.scrollTop;
if(newTime - oldTime > 500){
console.log(scrollTop)
oldTime = newTime
}
})
</script>
</body>
</html>
