防抖

原理： 当事件被触发 n 秒后再执行回调，如果在 n 秒内又被触发，则重新计时。
使用场景： 频繁触发按钮点击事件、input框搜索等等。

下图是没有使用防抖的input框。主要代码如下：

// 输入框
<el-form-item label="整机名称" prop="name" class="filter-item">
  <el-input v-model.trim="queryForm.name" placeholder="请输入" @input="handleInputChange"></el-input>
    
// methods
handleInputChange(value) {
  console.log(value);
}

下图是使用了防抖的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按钮。主要代码如下：

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

// methods
handleSubmit() {
  console.log(new Date());
}

下图中，使用了节流的button按钮。主要代码如下：

// 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)
    }
  }
}

防抖与节流的原理及适用场景

防抖

节流