vue防抖input

534 阅读1分钟

-vue的防抖

需求:输入框输入查询列表(一开始直接把查询接口赋值给input事件,每次输入都向后端发请求) 自我记录

踩坑1:

直接定义一个防抖函数debounce赋值给input的input的事件

99fc74a1bfe3ca75c15e0c9e2fefe61a.png

一开始以为是定时器的问题 后面检查发现没有问题 网上开始查询资料

只是返回了function回调函数 并不会执行

因为vue要触发事件才会执行当前的函数 直接赋值shakeInit只是执行shakeInit函数,不触发返回值

源码了解一下?

d41cce17f8454dd631ac4505ab31830d.png

初始化组件中 initState的过程中初始化了methods 530f678521ed466f78710229650c6181.png

初始化methods的过程中

adccb330c0a0709850290a0a7cf651c3.png

主要是挂载methods到组件实例上

改为返回自执行函数

b4d260db7bbed55712a7299c17a520b1.png

26cb782230267aed486c28f430fc8e3a.png

报错了

踩坑2:

上图中不执行的函数中的this不指向当前实例 是undefined

所以需要绑定当前组件实例传入

9c8a82b0c84435dbba32260a430f47c9.png

但是这样并没有达到防抖的效果 函数还是立即执行 只是延迟执行

finally:

cc91f547498bf46a1e1ca24c02542ac9.png

在初始化的时候将防抖函数赋值给input回调并执行