微信小程序与VUE函数防抖

加菲猫的VFP

发布于 2021-08-16 12:02:14

5630

发布于 2021-08-16 12:02:14

文章被收录于专栏：加菲猫的VFP

相信大家都见过百度的搜索框,我们在搜索框输入文字之后,然后点击百度一下,我们就可以开始搜索我们的网页了.

而在微信小程序中,APP中,我们会出现一个场景:

搜入几个字之后,我希望它能联想,或者显示出我们想要的数据.而不需要点搜索按钮.

微信小程序中有一个bindInput属性可以绑定每次输入. 但我们可能有个需求,不是刚写一个字就搜索.而是几个字输完之后,再调用后台的搜索.

将如下函数,放入小程序的js页面之中

function debounce(func, wait=1000){ //可以放入项目中的公共方法中进行调用（鹅只是省事）
 let timeout;
 return function(event){
  clearTimeout(timeout)
  timeout = setTimeout(()=>{
   func.call(this, event)
  },wait)
 }
}

在page里的方法加入

 inputJe: debounce(function (e) {
   console.log(e.detail.value);   
 }),

wxml输入框绑定inputJe方法即可.

VUE的示例如下

<template>
 <div>
  <input type='text' v-model='value' @keydown = "hangleChange">
 </div>
</template>
<script>
function debounce(func, wait=1000){ //可以放入项目中的公共方法中进行调用（鹅只是省事）
 let timeout;
 return function(event){
  clearTimeout(timeout)
  timeout = setTimeout(()=>{
   func.call(this, event)
  },wait)
 }
}
export default{
 name:'',
 data(){
  return{
   value:''
  }
},
 methods:{
  hangleChange:debounce(function(e){
   console.log(this.value)
  })
 }
}
</script>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-07-25，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序