目录
一、防抖（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秒内点击都无效。
