小白一看就会的《输入框防抖》

最新推荐文章于 2024-09-12 17:43:39 发布

海鸥两三

最新推荐文章于 2024-09-12 17:43:39 发布

阅读量159

点赞数 3

分类专栏： JavaScript uniapp小程序 vue3 文章标签： java javascript 开发语言前端 vue vue.js

本文链接：https://blog.csdn.net/qq_51463650/article/details/140352757

版权

vue3 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

uniapp小程序

21 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

防抖（多次触发只执行最后一次）

高频率触发的事件,在指定的时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。

首先准备一个带 id=“searchInput” 的输入框

在这里插入图片描述

其次就可以复制防抖啦

在这里插入图片描述


<input v-model="searchText" id="searchInput" placeholder="请输入"/>


// 防抖
const searchText = ref('')  //绑定输入框的值
const goSearch = (fn, delay) => {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  }
}


nextTick(() => {
  let input = document.getElementById('searchInput')
  input.addEventListener('input', goSearch(function () {
    GetUserPages() //请求数据
  }, 2000));
})