【uniapp】微信小程序使用定时器实现一个简单的防抖节流

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

h5部分：【bindinput绑定即可】

 <input type="number" bindinput="phoneNum"
 placeholder='请输入手机号' placeholder-style="text-align:center" />

js部分：

    phoneNum(e) {
      let timer;
      let keyWord = e.detail.value ? e.detail.value : null
      let that = this;
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        if (keyWord == null) {
          //这里表示  如果搜索框中没有数据的话，做的一些处理
          console.log('输入框为空');
        } else {
          //这里是搜索框中有值的情况，可以直接请求搜索接口即可
          // console.log(keyWord);
        }
      }, 5000)
      that.setData({
        phoneNum: keyWord,
        timer: null
      })

    }

用户输入5秒后再拿value值

---

uni部分重写：【暂且不太对，后期再改，凑和用一下，有时间封装一个完善点的】

<input type="text" @input="userNameInput" placeholder="名字"/>	

//获取用户名输入内容

export default {
		data() {
			return {
				//输入的用户名
				userName: '',

    }
}，
			userNameInput(e) {
				let timer;
				let keyWord = e.detail.value ? e.detail.value : null
				if (timer) {
					clearTimeout(timer)
				}
				timer = setTimeout(() => {
					if (keyWord == null) {
						//这里表示  如果搜索框中没有数据的话，做的一些处理
						this.userName = null,
						console.log('输入框为空，提示信息未输入完整');
					} else {
						//这里是搜索框中有值的情况，可以直接请求接口即可
						//一秒后将输入框中的内容传给 this.userName 
						this.userName = keyWord,
						timer = null
					}
				}, 1000)
			},