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

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

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

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

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

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

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

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

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

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

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

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