前端 vue 和element-ui,不能引入lodash 库,自定义事件 实现 页面防抖和节流效果,请用具体代码展示
时间: 2024-03-12 21:47:18 浏览: 28
好的,如果您不能使用 `lodash` 库,也可以自己实现页面防抖和节流的效果。以下是一个示例代码:
```vue
<template>
<div>
<input type="text" v-model="keyword" @input="myDebounceSearch" placeholder="输入关键字搜索">
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
timer: null
}
},
methods: {
// 自定义防抖函数
myDebounceSearch() {
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
console.log('debounce search:', this.keyword);
// 在这里进行搜索操作
}, 500);
},
// 自定义节流函数
myThrottleSearch() {
if (!this.timer) {
this.timer = setTimeout(() => {
console.log('throttle search:', this.keyword);
// 在这里进行搜索操作
this.timer = null; // 置空计时器
}, 500);
}
}
}
}
</script>
```
在上述代码中,我们自定义了 `myDebounceSearch` 和 `myThrottleSearch` 两个函数,分别实现了页面防抖和节流的效果。具体来说,当用户在输入框中输入关键字时,`@input` 事件会触发相应的防抖或节流函数,从而避免频繁触发搜索操作,提高了页面的性能和用户体验。
需要注意的是,在自定义防抖函数中,我们使用了 `setTimeout` 函数来实现延时执行的效果,并在每次函数调用前先清除上一次的计时器。在自定义节流函数中,我们使用了一个全局的计时器变量 `timer`,并在函数内部进行判断,只有在计时器为空的情况下才会执行搜索操作,并在搜索操作完成后将计时器变量置空。
这种方式虽然不需要引入 `lodash` 库,但需要自己实现相应的函数,并且代码比较繁琐。如果您的项目中需要频繁使用防抖和节流函数,建议还是选择引入 `lodash` 库来简化开发。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)