The anti-shake function of the uniapp input box fails

Search component:

<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>

External anti-shake function 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
}

Call the anti-shake function and search method: pay attention to the wording of the debounce method here. It was written in the body of the input function before, and the anti-shake of searchAdvise is invalid

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);
			},

Guess you like

Origin blog.csdn.net/qq_34569497/article/details/131062126