uniapp输入框防抖函数失效

最新推荐文章于 2024-03-28 09:15:14 发布

Jyann~

最新推荐文章于 2024-03-28 09:15:14 发布

阅读量354

点赞数

分类专栏： uniapp 前端文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/qq_34569497/article/details/131062126

版权

前端同时被 2 个专栏收录

173 篇文章 14 订阅

订阅专栏

uniapp

13 篇文章 0 订阅

订阅专栏

文章讲述了在uni-app中如何使用防抖函数(debounce)优化搜索组件的输入事件，避免频繁触发异步请求。通过将防抖函数应用到input事件处理函数，限制了searchAdvise方法的执行频率，提高了应用性能。

摘要由CSDN通过智能技术生成

搜索组件：

<view class="search-bar">
			<uni-search-bar placeholder="" class="search-bar-content" @confirm="search" v-model="searchVal"
				@input="input" :focus="true" bgColor="#EEEEEE" radius="50" cancelButton="always">
				<template v-slot:searchIcon>
					<uni-icons class="search-bar-icon" custom-prefix="bjsicons" type="bjs-search" size="30"
						@click="search"></uni-icons>
				</template>
			</uni-search-bar>
		</view>

外部防抖函数js:

export const debounce = (func, wait) => {
	let timerId = null;
	console.log(timerId);
	return function(){
	    let _This = this,
	        args = arguments;
	     if(timerId) clearTimeout(timerId);
	     timerId = setTimeout(function(){
	        func.apply(_This,args);
	        },wait);
	}
}

function throttle(){
	console.log("throttle");
}

module.exports = {
    throttle,
    debounce
}

调用防抖函数和搜索方法：注意这里debounce方法的写法。之前写在input函数体内，对searchAdvise进行防抖无效

search() {
				// 只有点击搜索才设置进搜索历史
				this.updateHistory(this.searchVal);
			},
			input: debounce(function (e) {
					this.searchVal = e;
					this.searchAdvise(this.searchVal);
			    }, 1000),
			async searchAdvise(keyword){
				const { list } = await unifyRequest(getSearchAdvise,keyword);
				this.searchList = list;
				console.log(list,this.searchList);
			},