带你了解防抖与节流

相似点：都是为应对事件持续频繁发生，造成前端性能下降或对后端服务造成的压力。

区别：节流会不断的触发，而防抖仅在最后一次触发。防抖适用于，如搜索输入框提示，仅在输入停止后进行一次提示更新，以减少后台压力。节流适用于，如窗体以拖动的方式调整大小，在每次特定的时间片结束后触发一次窗体大小调整。

防抖

原理： 当事件被触发 n 秒后再执行回调，如果在 n 秒内又被触发，则重新计时。

使用场景： 频繁触发按钮点击事件、input框搜索等等。

主要代码如下：

<el-form-item label="整机名称" prop="name" class="filter-item">
  <el-input v-model.trim="queryForm.name" placeholder="请输入" @input="handleInputChange"></el-input>
</el-form-item>

// methods
import { debounce } from '@/utils/common.js';

handleInputChange: debounce(() => {
  console.log(new Date());
}, 1000)

// common.js
/**
 * 函数防抖: 当事件被触发 n 秒后再执行回调，如果在 n 秒内又被触发，则重新计时。
 * @param {*} func 
 * @param {*} wait 
 * @returns { Function }
 */
export const debounce = (func, wait) => {
  let delay = wait || 500;
  let timer;
  return () => {
    const _this = this;
    let args = arguments;
    if(timer) clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      func.apply(_this, args)
    }, delay)
  }
}

节流

原理： 规定在一个单位时间内只能触发一次函数，如果在单位时间内触发多次,只执行一次。比如两秒内的点击事件，无论点多少次，两秒内只执行一次。

使用场景： 下拉加载更多（无限滚动）事件、浏览器的resize，scroll事件等等

主要代码如下：

// button
<el-form-item class="filter-item">
  <el-button type="primary" @click="handleSubmit">提交</el-button>
</el-form-item>

// methods
handleSubmit: throttle(() => {
  console.log(new Date());
}, 2000),

// common.js
/**
 * 函数节流: 规定在一个单位时间内只能触发一次函数，如果在单位时间内触发多次,只执行一次。
 * @param {*} func 
 * @param {*} wait 
 * @returns { Function }
 */
export const throttle = (func, wait) => {
  let delay = wait || 500;
  let timer;
  return () => {
    let _this = this;
    let args = arguments;
    if(!timer) {
      timer = setTimeout(() => {
        func.apply(_this, args);
        timer = null;
      }, delay)
    }
  }
}