您现在的位置是：课程教程文章
面试准备：快速学习JS防抖与节流
2023-12-13 23:25课程教程文章 人已围观
防抖与节流可谓是面试常见，其实很好理解，下面带你分分钟了解防抖与节流的基本思想与写法。
一、速识防抖：
在这之前，比如我们先定义一个按钮，并绑定一个点击事件，执行要触发的事件：
<!--定义一个按钮-->
<inputtype="button"id="btn"value="按钮"/>
<script>
//获取标签
varbtn=document.getElementById("btn");
//绑定事件
btn.addEventListener("click",real);
//要触发的事件
functionreal(e){
console.log("北极光之夜。");
console.log(e);
}
</script>可以发现，一直点击会一直触发事件，如果这个事件为发送一个请求，那么这对与服务器来说是很不友好的。同样的请求因为用户的多次点击而多次发送请求，返回的结果和只点击一次是一样的，大大加重服务器压力和影响性能。所以，我们引入防抖的概念，简单来说，防抖就是通过setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发。
二、速识节流：
节流其实就很好理解了，减少一段时间的触发频率。简单来说，就是你一直狂点不停的话，它会每隔一定时间就执行一次。它与防抖区别就是，无论事件触发多么频繁，都可以保证在规定时间内可以执行一次执行函数。下面利用计算时间戳实现：
<inputtype="button"id="btn"value="按钮"/>
<script>
varbtn=document.getElementById("btn");
//点击后触发trigger()函数，第一个参数为真实要执行的函数，第二个参数为限制时间
btn.addEventListener("click",trigger(real,500));
functiontrigger(fn,delay){
//设置bef，为上一次执行时间，初始为0
varbef=0;
returnfunction(){
//获取当前时间戳
varnow=newDate().getTime();
//如果当前时间减去上次时间大于限制时间时才执行
if(now-bef>delay){
//执行函数
fn(...arguments);
//执行后，上次时间赋值为这次执行时间
bef=now;
}
};
}
//真实要执行函数
functionreal(e){
console.log("北极光之夜。");
console.log(e);
}
</script>以上就是JS防抖与节流的介绍，希望对大家有所帮助。更多js学习指路：js教程
课程教程：面试准备：快速学习JS防抖与节流下一篇：没有了
