这篇文章将为大家详细讲解有关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防抖与节流的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。