input输入节流操作

最新推荐文章于 2024-08-19 11:26:37 发布

weixin_39682276

最新推荐文章于 2024-08-19 11:26:37 发布

阅读量2.4k

点赞数 5

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_39682276/article/details/103807422

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种前端开发中常见的优化技术——防抖(debounce)，用于处理输入框实时搜索场景。通过监听输入框值的变化并使用定时器，实现只有在用户停止输入一段时间后才触发接口调用，有效减少不必要的API请求，提高用户体验和系统性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input数据输入时用watch监听的

1. 输入空格不做处理

2. 清除之前定时器

3. 创建防抖定时器

a. 是否有值

b. 调用接口

代码段：

data() {

            return {

              //输入内容

              searchVal:'',

              //输入框防抖用的定时器

              debounceTimer:'',

            }

        },

watch: {

          searchVal(newVal,oldVal){

              //添加空格不做处理

              if(newVal.trim() == oldVal.trim()) return;

              // 输入框防抖

              clearTimeout(this.debounceTimer); 

              // 每次进来的时候都将之前的清除掉，如果还没到毫秒的时候就将之前的清除掉，这样就不会触发之前setTimeout绑定的事件， 如果超过毫秒，之前的事件就会被触发下次进来的时候同样清除之前的timer

              this.debounceTimer = setTimeout(()=>{

                  //输入框没值了，清空搜索框条件数据

                  if(!newVal){

                      // 设置为初始状态

                     =======（没有值相关操作） ======

                      return;

                  }



                  ====== 有值操作 （调取接口等等）======

              },500) //几毫秒进行

          }

        },

判断接口是否有数据？没数据展示‘没有找到数据呦！’

问题：第一次请求接口时，有延迟效果，会在500毫秒之后才会调用接口返回数据，第一次数据为空，但是不展示没数据内容。

所以不能直接判断数据是否为空。

解决：在接口请求后用字段展示。

例如：接口请求.then(res=>{

this.hasData = !!res.data;

})