1.什么是防抖:
(1.)防抖,顾名思义,防止抖动,以免把一次事件误认为多次,敲键盘就是一个每天都会接触到的防抖操作。
(2.)触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
(3.)把高频事件转变成低频事件,从而提高项目性能,提高用户的体验。
2.具体实现:
1.首先要在js文件中配置一个函数;
export default function debounce1(fn, delay) {
let t = null;
return function () {
if (t) {
clearTimeout(t);
}
t = setTimeout(fn, delay);
}
}
2.其次是给input框加input事件可以时时监听到input中值的变化;(此处运用vant组件库中的搜索框,具体使用请参考vant文档;)
<div class="searchs">
<van-search
v-model="keyword"
show-action
placeholder="搜索影片、影院"
@input="onSearch(keyword)"
>
<template #action>
<div @click="onSearch(keyword)">搜索</div>
</template>
</van-search>
</div>
3.最后是请求我们需要的数据;
//引入我们封装好的js文件(根据自己的路径进行更改)
import seach from "../../utils/seach";
//在data中初始化temp函数
data() {
return {
// 优化搜索框(添加防抖)
temp: ""
};
},
//调用并激活我们封装的防抖函数
created() {
this.temp = seach(this.getData, 1000);//这里的1000指的是触发高频事件后一秒内函数只会执行一次,如果一秒内高频事件再次被触发,则重新计算时间(可根据自己的需求进行修改)。
},
onSearch() {
this.temp();
},
getData() {
//在此函数中做数据的请求以及数据的处理
console.log("在此函数中进行一系列操作");
},