闭包--防抖和节流的应用场景及区别

闭包：一个函数作用域可内以访问另一个函数的局部变量，这个变量所在的函数就是闭包函数

闭包使得内部函数可以访问外部函数的属性（变量或方法）
在 JavaScript 中， 每当创建一个函数， 闭包就会在函数创建的同时被创建出来

闭包的应用：

1. 防抖策略

防抖策略(debounce)：是当事件被触发后,延迟n秒后再执行回调函数,如果在这n秒内事件被再次触发,则重新计时.

好处是:它能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次.

防抖的概念：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

防抖的应用场景:：

用户在输入框连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源.

实现
函数防抖:

    const debounce = (fn, time) => {
      let timeout = null
      return function () {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          fn.apply(this, arguments)
        }, time);
      }
    }

   
    let ipt = document.getElementById('aaa');
    ipt.addEventListener('input', debounce(function (){
      console.log('11',this.value)
    },500))

2. 节流策略

节流策略(throttle):,可以减少一段时间内事件的触发频率.

节流阀的概念:

高铁的卫生间是否被占用,由红绿灯控制,假设一个每个人上洗手间要五分钟,则五分钟之内别人不可以使用,上一个使用完毕之后,将红灯设置为绿灯,表示下一个人可以使用了.下一个人在使用洗手间时需要先判断控制灯是否为绿色,来知晓洗手间是否可用.

–节流阀为空,表示可以执行下一次操作,不为空,表示不能使用下次操作.
–当前操作执行完之后要将节流阀重置为空,表示可以执行下次操作了.
–每次执行操作之前,先判断节流阀是否为空

节流策略的应用场景:

1）鼠标不断触发某事件时,如点击,只在单位事件内触发一次.
2）懒加载时要监听计算滚动条的位置,但不必要每次滑动都触发,可以降低计算频率,而不必要浪费CPU资源.
这里我们用一个鼠标跟随效果的例子:

 // 节流： time时间内只执行一次
    const throttle = (fn, time) => {
        let flag = true;
        return function () {
          if (!flag) return;
          flag = false;
          fn.apply(this, arguments);
          setTimeout(() => {
            flag = true;
          }, time);
        };
      };
      // 频繁点击按钮
      let btn = document.getElementById('btn');
      btn.addEventListener('click', throttle(function(){
        console.log('节流')
      }, 5000))

1.渲染UI结构并美化样式

<!-- UI 结构 -->
<img src="./assets/angel.gif" alt="" id="angel" />
/* CSS 样式 */
html, body {
 margin: 0;
 padding: 0;
 overflow: hidden; }
#angel {
 position: absolute; }

2.使用节流优化鼠标跟随效果

1） 预定义一个timer节流阀
2）当设置鼠标跟随效果后,清空timer节流阀,方便下次开启延时器
3） 当执行事件是,先判断节流阀是否为空,如果不为空,则证明距离上次操作执行间隔还不到设置的时间

var angel=$(''.angel)
var timer=null;//预定义一个节流阀
$(document).on('mousemove',function(e){
if(timer){return}//判断节流阀是否为空
timer=setTimerout(function(){
$(angel).css('left',e.pageX+'px').css('top',e.pageY+'px')
timer=null;//清空节流阀,方便下次开启延时器
},16)
 
})

防抖和节流的区别
防抖:如果事件被频繁触发,防抖保证只能有一次触发生效,前面N多次触发都会被忽略.

节流:如果时间被频繁触发,节流能减少事件触发的频率,因此,节流是有选择性的执行一部分事件.

总结: 函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

4. 闭包的其他应用：

打车：

 // 打车价格
    var car = (function () {
      var start = 13; // 起步价  局部变量
      var total = 0; // 总价  局部变量
      return {
        // 正常的总价
        price: function (n) {
          if (n <= 3) {
            total = start;
          } else {
            //起步价加上超出的公里数的价格
            total = start + (n - 3) * 5
          }
          return total;
        },
        // 拥堵之后的费用
        yd: function (flag) {
          return flag ? total + 10 : total;
        }
      }
    })();
    console.log(car.price(5)); // 23
    console.log(car.yd(true)); // 33

这些都时闭包的应用：
防抖节流函数
单例模式
Vue中数据响应式Observer中使用闭包等。