函数防抖和节流

原创已于 2023-10-23 12:42:16 修改 · 907 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-11-16 22:00:42 首次发布

本文深入探讨JavaScript中的函数防抖与节流技术，这两种技术用于优化高频率执行的JS代码，提高前端性能。防抖通过setTimeout确保在设定时间内只执行最后一次，而节流则限制执行频率，确保在固定间隔内执行。文中详细阐述了它们的概念、应用场景，以及如何进行函数封装，并对比了两者之间的相同点和不同点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、初步了解函数防抖和节流

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

防抖：通过setTimeOut的方式，在一定的时间间隔内，将多次触发变为一次触发。（只执行最后一次）
节流：减少一段时间的触发频率。（控制执行次数）

二、函数防抖

1.为什么需要防抖

前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover
等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作
DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。

2.概念与应用

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

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

3.进行封装

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

    <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){
                   clearTimeout(t)
                }
                t = setTimeout(()=>{
                    // console.log(this)
                    // 使用call改变fn函数this指向
                    fn.call(this)
                },delay)   
            }
        }
    </script>

4.函数防抖应用场景

搜索框搜索输入。只需用户最后一次输入完，再发送请求；
用户名、手机号、邮箱输入验证；
浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染

三、函数节流

1.函数节流概念与应用

概念：限制一个函数在一定时间内只能执行一次。

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

2.封装函数

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

    <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>