在做搜索的时候,当搜索页面只有一个输入框、没有确定按钮的时候,只能在用户输入时请求服务端,查询数据。这样会导致频繁的发送请求,造成服务端压力。
解决这个问题,可以使用vue做输入节流。
1、创建一个工具类,debounce.js
export function debounce(func, delay) { let timer return (...args) => { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func.apply(this, args) }, delay) } }
2、在搜索页面使用
.text-input { display: block; width: 100%; height: 44px; border: 1px solid #d5d8df; }
以上这篇vue输入节流,避免实时请求接口的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持趣学号。