为什么使用防抖和节流:
防抖和节流都是前端开发中非常重要的优化技术,可以有效地优化页面性能,提升用户体验。
什么是防抖:
在事件被触发n秒之后再执行回调函数,如果在这个事件段内再被触发的话就会重新计时。类似于一开始的王者荣耀,在点击回程之后的一段时间后才能回城,当你在处于回城时间段内再次点击之后就会重新开始。
![](https://i-blog.csdnimg.cn/blog_migrate/df1f4f6427766eefe82707e4a8d09547.png)
防抖的应用场景:
搜索框搜索输入。只需用户最后一次输入完,再发送请求
手机号、邮箱验证输入检测
窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
防抖的实现
<!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>
<input type="text">
<script>
const ipt = document.querySelector('input')
ipt.addEventListener('keyup',debounce(
function(){
console.log(ipt.value);
}
))
function debounce(fn){
let timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(this,arguments)
timer = null
},1000)
}
}
</script>
</body>
</html>
什么是节流?
n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
应用场景
滚动加载,加载更多或滚到底部监听
搜索框,搜索联想功能
节流的实现:
<!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>
<input type="text">
<script>
const ipt = document.querySelector('input')
ipt.addEventListener('keyup',throttle(
function(){
console.log(ipt.value);
}
))
// 触发事件 一段时间内只执行一次
function throttle(fn){
let timer;
return function(){
if(!timer){
timer = setTimeout(()=>{
fn.apply(this,arguments);
timer = null
},3000)
}
}
}
</script>
</body>
</html>