uniapp中利用定时器进行关键字的模糊查询，通过数组的遍历展示出来

防抖就是（当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时）：

防抖的目的就是减少不必要的请求，还有就是当数据过多的时候，第二次请求可能会比第一次请求的速度快，就会覆盖第一个请求的数据，所以使用定时器，可以减少这些麻烦

<template> <!-- 这是一个带有阴影的input输入框，可以直接使用--> <view style="margin-left: 80rpx;"> <view class="content1"></view> <view class="search-block shadow" > <image style="width: 30rpx;height: 30rpx;position: absolute;top: 15rpx;left: 30rpx;" src="../../static/queryImages/search.png" @click="search_site" mode=""></image> <input type="text" placeholder="请输入古树编号进行搜索" name="tree_name" class="search-text" maxlength="10" focus v-model="tree_num" @focus="search_site" @input="search_site"/> <image style="width: 50rpx;height: 50rpx;position: absolute;top: 4rpx;right: 20rpx;" src="../../static/close.png" mode="" @click="clearInput('tree_num')"></image> </view> <!--遍历数组，然后点击输入框，编号就会展示出来，也可进行搜索编号--> <view v-for="tree in treeNum" :key="tree.id" style="margin-left: 30rpx;"> <text @click="toDetail(tree.id)">{{tree.tree_num}}</text> </view> </view> </template> <script> export default { data() { return { treeNum:[],// fname:'', tree_num:'', timmer:null }; }, mounted() { // this.init(); }, methods: { // 点击取消按钮清空输入框 clearInput(val) { this[val] = ''; this.treeNum = []; }, //模糊查询 search_site(){ clearTimeout(this.timmer); this.timmer= setTimeout(()=>{ let opts = { url:'tree', }; let data = { tree_num:this.tree_num }; this.http.HttpRequest(opts,data).then(res=>{ this.treeNum = res.data; // console.log(this.treeNum,"lll") }) },500) }, toDetail(treeId) { uni.navigateTo({ url:`./tree_detail?id=${treeId}` }) } }, // watch: { // tree_num:function(){ //调用模糊查询函数 // this.search_site(); // } // } }; </script> <style scoped> .content1 { height: 40rpx; } page { background-color: #ffffff; } .search-text { font-size: 14px; background-color: #ffffff; height: 60rpx; width: 480rpx; } .search-block { display: flex; flex-direction: row; /* margin-left: 30rpx; */ /* padding-left: 60rpx; */ position: relative; top: -32rpx; align-items: center; justify-content: center; } .shadow{ margin-right: 60rpx; border-radius: 18px; -moz-box-shadow: 0 0 10px #e6e6e6; -webkit-box-shadow: 0 0 10px #e6e6e6; box-shadow: 0 0 10px #e6e6e6; /* position: absolute; top: -90rpx; left: 60rpx; */ } </style

效果图：