闭包（防抖节流）

最新推荐文章于 2023-04-27 15:47:07 发布

hao_xiao_guang

最新推荐文章于 2023-04-27 15:47:07 发布

阅读量372

点赞数 1

文章标签： javascript es6 开发语言

本文链接：https://blog.csdn.net/hao_xiao_guang/article/details/120875206

版权

什么是闭包

①要理解闭包，首先理解javascript特殊的变量作用域，变量的作用于无非就是两种：全局变量，局部变量。
②javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。
③我们有时候需要得到函数内的局部变量，但是在正常情况下，这是不能读取到的，这时候就需要用到闭包。在javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量对象的引用。

闭包的特点

优点：

让外部访问函数内部变量成为可能
局部变量会常驻在内存中
可以避免使用全局变量，防止全局变量污染

缺点：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

闭包的应用场景

①函数作为参数被传递
②函数作为返回值被返回
③实际应用（隐藏数据）：为什么说隐藏数据了呢，因为普通用户只能通过get、set等api对数据进行查看和更改等操作，没法对data直接更改，达到所谓隐藏数据的效果；jquery就利用了这一特性，必须调用$.ajax()才能访问内部属性方法。
封装功能时(需要使用私有的属性和方法)，
函数防抖、函数节流
单例模式

函数节流防抖

本质上是优化高频率执行代码的一种手段

防抖：n 秒后在执⾏该事件，若在 n 秒内被重复触发，则重新计时

节流： n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效

相同点：

都可以通过使⽤ setTimeout 实现

⽬的都是，降低回调执⾏频率。节省计算资源

不同点：

函数防抖

在⼀段连续操作结束后，处理回调，利⽤ clearTimeout 和 setTimeout 实现

函数防抖关注⼀定时间连续触发的事件，只在最后执⾏⼀次

函数节流：

在⼀段连续操作中，每⼀段时间只执⾏⼀次，频率较⾼的事件中使⽤来提⾼性能：

函数防抖应用场景：

搜索框搜索输⼊（如百度搜索）、⼿机号、邮箱验证输⼊检测、浏览器窗口大小调整触发的事件

函数节流应用场景：

滚动加载，加载更多或滚到底部监听

搜索框，搜索联想功能

//防抖
function debounce(fn, t) {
    let timer
    let delay = t || 500
    return function (...args) {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            timer = null
            fn.apply(this, args)
        }, delay)
    }
}

//节流
function throttle(fn, t) {
    let flag = true
    let interval = t || 500
    return function (...args) {
        if (flag) {
            fn.apply(this, args)
            flag = false
            setTimeout(() => {
                flag = true
            }, interval)
        }
    }
}

2. 闭包作用回调函数

            <body>
			    <a href="#" id="as1">20</a>
			    <a href="#" id="as2">40</a>
			</body>
			<script>
			 function changeSize(size){
			     return function(){
			         document.body.style.fontSize=size+'px';
			     }
			 }
			 var size20=changeSize(20);
			 var size40=changeSize(40);
			
			 document.getElementById('as1').onclick=size20;
			 document.getElementById('as2').onclick=size40;
			
			</script>

3. 封装对象的私有属性和方法

/ 闭包隐藏数据，只提供 API
function createCache() {
    const num=100
    const data = {} // 闭包中的数据，被隐藏，不被外界访问
    return {
        num:num,
        set: function (key, val) {
            data[key] = val
        },
        get: function (key) {
            return data[key]
        }
    }
}

const c = createCache()
console.log(c.num)//num此时就作为c私有属性
c.set('a', 100) //set此时作为c的私有方法
console.log( c.get('a') )

hao_xiao_guang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
闭包（防抖节流）

闭包是指有权访问另外一个函数作用域中的局部变量的函数。声明在一个函数中的函数，叫做闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。闭包的特点让外部访问函数内部变量成为可能局部变量会常驻在内存中可以避免使用全局变量，防止全局变量污染...
复制链接

扫一扫