Vue 防抖节流 详细介绍（面试常客、去繁从简、性能优化）

<el-input v-model=“inputVal” placeholder=“请输入内容” @input=“inputChange”>

<el-button type=“plain” @click=“search”>搜索

现在，在输入框输入内容，查看打印信息

此时发现控制台中打印了三次， 我是很快速地输入了“leo”，但是却打印了三次，相当于发送了三次请求，而前面两次对于我来说是没必要的，还占用了资源。现在还只有三个字符，试想一下，如果输入的是一串长字符串，如下

这么夸张，我要是服务器我都想罢工了。

再看点击“搜索按钮”。我快速点击按钮多次，会有以下现象

竟然请求了32次，这样也就罢了，而且还都是同样的请求，我要是服务器就直接不干了。

以上只是非常小的场景，还有很多相似的情形，即都是连续操作时触发相同且不必要的事件。

此类情况我们姑且简单称为“抖动”，那么我们限制此类情况的做法，便称为防抖。

那么上面两个功能该如何进行优化？

1、在输入框连续输入时内容，确保输入停止后过了1s再触发事件或发送请求；

2、点击“搜索”按钮，发送请求，确保无论连续点击多少次，只能过了1s后再点击才能触发。

对于优化1，我们使用防抖；对于优化2，我们使用节流。

防抖的使用

先实现功能，再阐述原理。现在，我们在项目中scr目录下新建一个文件夹util，里面新建一个文件debounce.js，实现防抖方法并导出。

//防抖实现

export default function debounce(