闭包 && 防抖 && 节流

1、闭包是啥??

  1. 闭包就是能够读取其他函数内部变量的函数,内层函数可以访问到外层函数的作用域;
  2. 简单的说:闭包就是函数嵌套函数;

2、闭包的 优点 && 缺点

  1. 优点:可以实现数据的私有化,外部函数也可以访问函数内部变量,避免全局变量的污染;
  2. 缺点:会造成内存泄漏;
  3. 内存泄漏就是函数执行返回一个引用数据类型被外界所接受,或者引入外部变量了,就会形成一个不销毁的作用域,一直存在内存里面,就会造成内存泄漏;
  4. 私有化就是函数形成了一个私有的作用域,保护内部的变量不受外界的干扰,适合模块化开发,经常会用在节流、防抖、函数柯里化,hooks,vue、生命周期源码都有闭包的引入;

3、那些操作会引起 泄漏

  1. 内存泄漏就是指任何对象我们不在用他或者不需要的时候他仍然存在,这样会引起泄漏;
  2. 比如:1、setTimeout(延迟定时器) 的第一个参数使用字符串不是函数的话,会引发内存泄漏;2、没有销毁的事件监听器,事件监听器是常见的内存泄漏源。当你在DOM元素上添加事件监听器时,如果不手动删除它们,它们将一直存在于内存中;3、循环引用是另一个常见的内存泄漏源。当两个或多个对象相互引用时,并且没有任何引用指向它们之中的任何一个时,它们将无法被垃圾回收。

4、解决闭包 缺点引起的 内存泄漏

  1. 避免循环引用:循环引用是指两个或多个对象之间相互引用,导致它们无法被垃圾回收。要避免循环引用,可以在不需要引用的时候手动断开引用关系,或者使用弱引用(Weak Reference)来解决。
  2. setTimeout(延迟定时器) 不在使用的时候及时清理掉;

5、防抖 && 节流 的区别

  1. 相同点:都是为了减少事件触发频率,优化性能;
  2. 都是用来去处理短时间内去,处理大量触发事件的一种处理方式,处理方式不同,

不同点

6、防抖

  1. 防抖是指在一段时间内只要有事件触发,就重新计算时间,直到这段时间内没有事件触发,才真正的执行事件;
  2. 防抖的应用场景: 用户在输入框连续输入一串字符时,可以通过防抖策略;搜索框搜索输入,并在输入完以后自动搜索、手机号,邮箱验证输入检测、窗口大小 resize 变化后,再重新渲染。

7、节流

  1. 节流是指在一段时间内最多触发一次事件,节流算法会在特定的时间间隔内判断是否触发事件;
  2. 节流策略的应用场景: 鼠标不断触发某事件时,如点击,只在单位事件内触发一次;滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交
  3. 实现思路:我们会有一个节流阀,事件来了之后我会判断一下这个节流阀,如果节流阀是一个true,那我们就开启这个执行时间,同时把节流阀改为false,然后再开启一个定时器,一秒以后再把节流阀改为true

8、防抖的实现思路

  1. 先写一个函数,然后在内层再return写一个函数,在外层函数里定义一个 timer 定时器,

  2. 如果执行了这个定时器,那么在return返回的函数里先清除之前的定时器,然后再新加一个,

  3. 防抖就是每次一执行return这个函数,就要把之前的函数清掉,然后重新加一个定时器,

  4. 指定一个延迟时间,delay,fn

demo

// 防抖函数
function debounce(func, delay) {
  let timer;

  return function() {
    // 清除之前的定时器
    clearTimeout(timer);

    // 创建新的定时器打包
    timer = setTimeout(() => {
      // 执行函数处理逻辑
      func.apply(this, arguments);
    }, delay);
  };
}
闭包防抖节流都是 JavaScript 中常用的技术,用于解决一些常见的问题。 闭包是指函数能够访问其外部作用域中的变量,即使在函数外部,这些变量也仍然存在。闭包常用于创建私有变量和函数。例如: ``` function counter() { let count = 0; return function() { return ++count; } } const increment = counter(); console.log(increment()); // 1 console.log(increment()); // 2 ``` 防抖节流都是用于处理事件频繁触发的情况,以减少性能开销。 防抖是指在事件触发后一定时间内没有再次触发时,才执行相应的操作。例如: ``` function debounce(fn, delay) { let timer; return function() { const args = arguments; clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); } } function handleInput() { console.log('Input has stopped.'); } const debouncedHandleInput = debounce(handleInput, 500); document.querySelector('input').addEventListener('input', debouncedHandleInput); ``` 节流是指在一定时间间隔内,只执行一次相应的操作。例如: ``` function throttle(fn, delay) { let lastTime = 0; return function() { const currentTime = Date.now(); if (currentTime - lastTime > delay) { fn.apply(this, arguments); lastTime = currentTime; } } } function handleScroll() { console.log('Scrolling...'); } const throttledHandleScroll = throttle(handleScroll, 500); window.addEventListener('scroll', throttledHandleScroll); ``` 以上是简单的例子,实际应用中还需要根据具体情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值