vue.js|vue中搜索实现防抖前端|性能优化|javascript

在输入框搜索时输入搜索内容中频繁搜索结果，影响浏览器性能。
原始写法：

data() { return { input: "", timer: null, }; }, search() { // 执行搜索请求 console.log(this.input); }

【vue.js|vue中搜索实现防抖】

文章图片

文章图片

可以简单处理一下，在特定时间内只执行一次搜索，用户在输入途中只要不停止输入就不会触发搜索请求。

data() { return { input: "", timer: null, }; }, search() { clearTimeout(this.timer); this.timer = setTimeout(() => { // 执行搜索请求 console.log(this.input); }, 1000); // 设置时间 },

文章图片

封装一下

/** * 防抖 * @param fn 传入方法 * @param delay 传入时间 * @使用闭包防止重复创建影响性能 */ export default function (fn, delay) { let timer = null; return function () { if (timer) { clearTimeout(timer); timer = setTimeout(fn, delay); } else { timer = setTimeout(fn, delay); } }; }