如何将节流防抖应用于Vue组件，并改写为长尾？

本文共计3113个文字，预计阅读时间需要13分钟。

故事背景：项目有一个需求是在输入框输入时进行搜索，展示下拉数据。但不需要输入一个字都进行搜索，而是想到在输入结束后200毫秒再进行搜索，从而引出了js的节流（throttle）技术。

故事背景：

项目有个需求是输入框在输入的时候进行搜索，展示下拉数据，但是没必要输入一个字都进行搜索，所以想到了在输入结束200毫秒后再进行搜索，从而引出来了 js的节流(throttle)，防抖（debounce），在网上想找个现成的用下，但是好多都不对，于是就自己搞了。

先看看概念

函数防抖(debounce)：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

函数节流(throttle)：

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。