锐客网

  1. 首页 > 睿知 > it技术 > >

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

前端vue.jsjavascript性能优化

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

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

【vue.js|vue中搜索实现防抖】vue.js|vue中搜索实现防抖
文章图片

vue.js|vue中搜索实现防抖
文章图片

可以简单处理一下，在特定时间内只执行一次搜索，用户在输入途中只要不停止输入就不会触发搜索请求。
data() { return { input: "", timer: null, }; }, search() { clearTimeout(this.timer); this.timer = setTimeout(() => { // 执行搜索请求 console.log(this.input); }, 1000); // 设置时间 },

vue.js|vue中搜索实现防抖
文章图片

封装一下
/** * 防抖 * @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); } }; }

    推荐阅读


    上一篇：vue.js|vue3 el-input 搜索实现防抖

    下一篇：vue项目|vue移动端 利用防抖的原理 ---实现搜索页面防抖操作