这篇文章将为大家详细讲解有关JS防抖与节流的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
一、速识防抖：
在这之前，比如我们先定义一个按钮，并绑定一个点击事件，执行要触发的事件：
计算
安全
数据库
网络和加速
企业服务
<!-- 定义一个按钮 -->
<input type="button" id="btn" value="按钮" />
<script>
// 获取标签
var btn = document.getElementById("btn");
// 绑定事件
btn.addEventListener("click", real);
// 要触发的事件
function real(e) {
console.log("北极光之夜。");
console.log(e);
}
</script>可以发现，一直点击会一直触发事件，如果这个事件为发送一个请求，那么这对与服务器来说是很不友好的。同样的请求因为用户的多次点击而多次发送请求，返回的结果和只点击一次是一样的，大大加重服务器压力和影响性能。所以，我们引入防抖的概念，简单来说，防抖就是通过setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发。
二、速识节流：
节流其实就很好理解了，减少一段时间的触发频率。简单来说，就是你一直狂点不停的话，它会每隔一定时间就执行一次。它与防抖最大的区别就是，无论事件触发多么频繁，都可以保证在规定时间内可以执行一次执行函数。下面利用计算时间戳实现：
<input type="button" id="btn" value="按钮" />
<script>
var btn = document.getElementById("btn");
// 点击后触发trigger()函数，第一个参数为真实要执行的函数，第二个参数为限制时间
btn.addEventListener("click", trigger(real, 500));
function trigger(fn, delay) {
// 设置bef，为上一次执行时间，初始为0
var bef = 0;
return function () {
// 获取当前时间戳
var now = new Date().getTime();
//如果当前时间减去上次时间大于限制时间时才执行
if (now - bef > delay) {
// 执行函数
fn(...arguments);
//执行后，上次时间赋值为这次执行时间
bef = now;
}
};
}
//真实要执行函数
function real(e) {
console.log("北极光之夜。");
console.log(e);
}
</script>关于“JS防抖与节流的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.py.cn/toutiao/33337.html
