js的防抖和节流 2021/3/6

最新推荐文章于 2024-04-07 15:57:31 发布

花开半夏96

最新推荐文章于 2024-04-07 15:57:31 发布

阅读量78

点赞数

本文链接：https://blog.csdn.net/weixin_42067565/article/details/114444865

版权

1.防抖：

这是前端中最基础的性能优化，在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。尤其是在涉及与后端的交互中，前端依赖于某种事件如resize，scroll，发送Http请求，在这个过程中，如果不做防抖处理，那么在事件触发的一瞬间，会有很多个请求发过去，增加了服务端的压力。
————————————————
版权声明：本文为CSDN博主「Coding_AlexH」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41000891/article/details/82733532

防抖的定义：
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

<body>
    <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
    <script>
       1. //防抖
        var num = 1;
        let content = document.getElementById('content');
        function count(a) {
        content.innerHTML = num++;
        console.log(a)//因为绑在了dom上，所以会打印出出发的事件event
        console.log(this)
        };
        // content.onmousemove = count;//这种情况下执行count时，this指向div
        function debounce(fn,awit){
        let timeout=null;
        return function(){
        var content=this;
        var arg=arguments;
        if(timeout!==null) clearTimeout(timeout);
        timeout=setTimeout(()=>{fn.apply(content,arg)},awit)
        }
        }
        content.onmousemove = debounce(count,1000)

2.节流

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。
————————————————
版权声明：本文为CSDN博主「Coding_AlexH」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41000891/article/details/82733532

function throttle(func, delay){
         let prev = Date.now();
         return function(){
         const context = this;
         const args = arguments;
         const now = Date.now();
         if(now - prev >= delay){
         func.apply(context, args);
         prev = Date.now();
         }
         }
         }

花开半夏96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的防抖和节流 2021/3/6

1.防抖：这是前端中最基础的性能优化，在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。尤其是在涉及与后端的交互中，前端依赖于某种事件如resize，scroll，发送Http请求，在这个过程中，如果不做防抖
复制链接

扫一扫