目录

一、防抖（debounce）

1.使用场景

2.js代码实现

3.lodash工具库使用

二、节流（throttle）

1.使用场景

2.js代码实现

3.lodash工具库使用

---

前端做项目，为了防止用户因为网络不好数据响应慢，导致进行多次点击，或者其他影响性能的操作，需要使用防抖和节流。

一、防抖（debounce）

防止抖动(只执行最后一次)，单位时间（比如3秒）内事件触发时初始时间会被重置为当前时间，执行时间需在等待设置的单位时间（比如3秒），避免事件被误触发多次。代码实现重在清零 clearTimeout。

防抖可以比作等电梯，只要有一个人进来，就需要从当前时间往后再等3秒在上升电梯，A进入电梯（12：00），2秒后B进入电梯（12：02），那么电梯的启动时间就是，B进来时间点为初始时间0，往后3秒（12：05）。

1.使用场景

        ①表单验证

        ②搜索框联想搜索

        ③窗口调整

        ④按钮点击

        ⑤页面滚动

2.js代码实现

const debounce = (fn, time) => {
  let timer = null
  return (...args) => {
    const context = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.call(context, ...args)
    }, time)
  }
}

3.lodash工具库使用

lodash是js工具库，涉及对数组，函数，集合，数学，数字，对象，字符串等处理数据的各种方法相对比较全。用起来也非常的简单。

首先安装lodash:

npm i lodash

使用：

<!-- html元素绑定事件-->
<div @click="changeSelectedOneClick($event, "666")">按钮</div>


//js代码，首先引入防抖函数debounce
import { debounce} from 'lodash';

/**
 * 按钮点击事件
 */
const changeSelectedOneClick = debounce((evt, str) => {
	console.log(str)
}, 3000);

当前代码，用户12：00点了一次按钮，2秒后（注意这个时间必须在你设置的单位时间内，比如当前案例就是3秒内。如3秒外那么就不设计防抖了），12：02又点了一次按钮，那么12：05时事件会执行，控制台输出“666”。

二、节流（throttle）

控制流量(单位时间内只触发一次)，与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。如果设置时间3秒，用户点击了按钮，那么3秒内只有第一次生效，再次点击无效。

1.使用场景

        ①按钮点击

        ②页面滚动

        ③输入框输入

2.js代码实现

const throttle = (fn, time) => {
  let activeTime = null
  return (...args) => {
    const context = this
    const current = Date.now()
    if (current - activeTime >= time) {
      fn.call(context, ...args)
      activeTime = Date.now()
    }
  }
}

3.lodash工具库使用

lodash是js工具库，涉及对数组，函数，集合，数学，数字，对象，字符串等处理数据的各种方法相对比较全。用起来也非常的简单。

首先安装lodash:

npm i lodash

使用：

<!-- html元素绑定事件-->
<div @click="changeSelectedOneClick($event, "666")">按钮</div>


//js代码，首先引入防抖函数throttle
import { throttle } from 'lodash';

/**
 * 按钮点击事件
 */
const changeSelectedOneClick = throttle((evt, str) => {
	console.log(str)
}, 3000);

当前代码，用户12：00点了一次按钮，控制台输出“666”。2秒后，12：02又点了一次按钮，那么这次无效，3秒内点击都无效。