js闭包以及计数器,防抖节流的实现

471 阅读1分钟

闭包就是将函数内部和函数外部连接起来的一座桥梁。

  • JavaScript高级程序设计:闭包是指有权访问另一个函数作用域中的变量的函数
  • JavaScript权威指南:从技术的角度讲,所有的JavaScript函数都是闭包:它们都是对象,它们都关联到作用域链
  • 你不知道的JavaScript:当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行

闭包有三个特性:

函数嵌套函数。 函数内部可以引用外部的参数和变量。 参数和变量不会被垃圾回收机制回收。

闭包的好处:

希望一个变量长期存储在内存中。 避免全局变量的污染。 私有成员的存在。

闭包的缺点:

常驻内存,增加内存使用量。 使用不当会很容易造成内存泄露。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button onclick="count()">计数器</button>

    </div>
    <div>
        <button onclick="debounce()">防抖</button>

    </div>
    <button onclick="throttling()">节流</button>
</body>
<script>
    // 计数器
    var count = (function () {
        var count = 0
        return function () {
            count += 1
            console.log(count)
        }
    })()
    // 防抖 
    var debounce = (function () {
        var timer = null
        return function () {
            // 如果定时器存在清除定时器
            if (timer) {
                clearTimeout(timer)

            }
            // 设置定时器2秒后执行方法
            timer = setTimeout(res => {
                console.log("防抖执行")
            }, 2000)


        }
    })()
    // 节流
    var throttling = (function () {
        // 设置 is为true
        var is = true
        return function () {
            // is为true不执行 is为false执行 
            if (!is) {
                //   中断后面的代码执行
                return false
            }
            //   设置is 为false 
            is = false
            //   定时器两秒后执行 两秒后is设为true  此时再调用该函数第一步if语句无法执行 (无法中断执行) 放开代码执行(每两秒开启一次可执行阀门)
            setTimeout(() => {
                console.log("节流执行")
                is = true
            }, 2000);
        }

    })()



</script>

</html>