js闭包和防抖节流_js 中防抖和节流都是通过闭包做的吗-CSDN博客

本文链接：https://blog.csdn.net/m0_63836635/article/details/126465342

1.闭包和它的优缺点

闭包就是能够读取其他函数内部变量的函数。在本质上，它是连接函数外部和内部的桥梁，可以重用一个变量，闭包形成的三大条件：

外层函数定义包裹内层函数
内层函数访问外层函数的变量
把内层函数当作返回值提供给外部访问

优点：第一，可以重复使用变量；第二，不污染全局变量
缺点：因为外部引用不被释放，无法被垃圾回收站回收，会长期占用内存，比一般函数更加消耗内存
示例：

//1.定义外部函数
function testClosure() {
    let num = 0;
    //3.返回内部函数
    return () => {
        //2.在内层函数访问外层函数
        console.log(num++)
    }
}

const num = testClosure()
num()//0
num()//1
num()//2

2.利用闭包实现防抖和节流

防抖和节流都是控制函数的都是降低程序执行频率的方法，但是防抖和节流有着本质的差别，防抖是指事件函数在一定时间连续触发只执行最后一次，节流是指同一单位时间内只执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function() {
            //获取两个按钮
            const debounceBtn = document.querySelector("#debounce")
            const thorttleBtn = document.querySelector("#thorttle")
            
            //防抖
            function Debounce(fn, delay) {
                let timer = null
                //定义内部函数
                const debounce = function() {
                    //形成闭包，timer变量不被释放，如果timer不为空则清除延时执行
                    if(timer) clearTimeout(timer)
                    //最后一次触发执行
                    timer = setTimeout(() => {
                        fn()
                    }, delay) 
                }

                return debounce
            }

            debounceBtn.onclick = Debounce(() => {console.log("Debounce")}, 1000)

            //节流
            function Thorttle(fn, delay) {
                let timer = null
                //定义内部函数
                const thorttle = function() {
                    //如果有延时任务则不在重新触发
                    if(!timer) {
                        timer = setTimeout(() => {
                            fn()
                            //delay时间后把timer设置为null
                            timer = null
                        }, delay)
                    }
                }

                return thorttle
            }

            thorttleBtn.onclick = Thorttle(() => {console.log("Thorttle")}, 1000)            
        }
    </script>
</head>
<body>
   <button id="debounce">防抖</button>
   <button id="thorttle">节流</button>
</body>
</html>