函数的节流和防抖

最新推荐文章于 2024-04-03 13:08:44 发布

前端柯兰

最新推荐文章于 2024-04-03 13:08:44 发布

阅读量1.7k

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/xinxin7789/article/details/122371867

版权

一、函数防抖和节流的概念

函数防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

即：限制函数的执行次数

防抖：通过setTimeOut的方式，在一定的时间间隔内，将多次触发变为一次触发。（只执行最后一次）

节流：减少一段时间的触发频率。（控制执行次数）

二、函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

    <input type="text" id="test"/>
     <script>
        let inp = document.getElementById('test');
        let t = null;
        inp.oninput = function(){
             if(t!=null){
                 clearInterval(t)
             }
             t = setTimeout(()=>{
                 console.log(this.value)
            },500)      
        }
    </script>

对函数进行封装，封装后：

    <input type="text" id="test"/>
    <script>
        let inp = document.getElementById('test');
        inp.oninput = debounce(function(){
            console.log(this.value)
        },500)
        function debounce(fn,delay){
            let t = null;
            return function(){
                if(t!=null){
                   clearInterval(t)
                }
                t = setTimeout(()=>{
                    // console.log(this)
                    // 使用call改变fn函数this指向
                    fn.call(this)
                },delay)   
            }
        }
    </script>

三、函数节流

每隔一段时间，只执行一次函数。

    <body style="height: 2000px;"></body>
    <script>
        let flag = true;
        window.onscroll= function(){
            if(flag){
                setTimeout(()=>{
                    console.log('@')
                    flag = true
                },500)  
            }
            flag=false
        }
    </script>

对函数进行封装，封装后：

    <body style="height: 2000px;"></body>
    <script>
        window.onscroll= throttle(function(){
            console.log('@')
        },500)
        function throttle(fn,delay){
            let flag = true;
            return function(){
                if(flag){
                    setTimeout(()=>{
                        fn.call(this)
                        flag = true
                   },delay)  
                }
                flag = false
            }
        }
    </script>