前端基本功（九）:完全理解函数节流与防抖，以及我是如何在平常开发中应用函数节流与防抖的。

1. 如何理解函数节流与函数防抖

1. 函数节流（throttle）：从字面上理解，就是节约函数的执行次数(约定必定的时间执行一次)，在咱们进行一些高频执行函数的操做中能够应用。
2. 函数防抖（debounce）：从字面上理解，防止函数抖动，那么函数为何会抖动？就是在咱们尚未彻底确认此刻操做的时候频繁执行函数，防抖就是合并咱们的函数执行（多个欲执行函数到约定的时间点后再合并执行）。只有触发操做后超过指定的间隔说明这一次触发才有效，不然就要从新计时等待。

2. 手动实现节流与防抖

1. 函数节流

1. 实现思路：利用定时器在第一次触发函数时打一个开关，表明我已经进入了倒计时，在指定的时间后会触发，可是你在这个指定的时间以前都经过判断这个开关是打开状态就没法再次触发函数，等到倒计时结束开关关闭，下次执行就能够再次进行倒计时操做。也就实现了约定必定的时间执行一次函数的操做。

2. 简单代码实现：

   function throttle(fn, delay = 500) {
     let canRun = true; 
     return function() {
       // 这里实际上是使用了闭包的原理，函数内部保存使用了函数外部的变量。
       if(!canRun) return;
       canRun = false;
       setTimeout(() => {
         fn.apply(this, arguments);
         canRun = true;
       }, delay)
     }
   }
   复制代码

2. 函数防抖

1. 实现思路：仍是一样须要利用定时器，当咱们执行这个函数时，会生成一个定时器，可是若是你重复执行这个函数，每次执行函数的第一步是清除上一次的定时器，这样就能够达成只有触发操做后超过指定的间隔说明这一次触发才有效，不然就要从新计时等待。

2. 简单代码实现：

   function debounce(fn, delay = 500) {
     let timeout = null;
     return function() {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
         fn.apply(this, arguments);
       }, delay)
     }
   }
   复制代码

3. 我在开发中使用的案例

1. 通常状况下，咱们在平常开发中都会使用一些函数库好比说loadsh、underscore等。这些类库通常都已经封装好了throttle、debounce等函数，咱们通常直接使用便可。
2. 前段时间产品就提出了一个需求：咱们只须要在一个输入框中输入一个客户的关键字，就能够模糊筛选中匹配指定的客户。若是说，咱们只要监听onchange事件就请求后台接口匹配的数据便可。可是这样致使的问题是，用户仅仅还在输入法联想阶段或者是正在输入状态下，也会到此请求接口。那么这种情景下就可使用咱们debounce函数来进行优化。

// 案例一：这里使用了装饰器包装了loadsh中的debounce
  @Debounce(300)
  onSearch(name) {
    this.props.dispatch({type: 'sysUser/queryOrgUser', payload: {
      body: {
        name,
        role: USERROLE_TYPE.ACCOUNT_MANAGEMENT,
      }
    }});
  }

// 案例二：这里直接用的loadsh的debounce包装了咱们方法
  const debounceCalculate = debounce(this.trialTranslateMoney, 500);
  if(value <= num) {
    debounceCalculate({
      investAmt: value
    })
  }else {
    this.money = num;
  }
复制代码