搜索功能(四)-搜索关键字防抖效果——接口调用时进行防抖处理 & 函数防抖:特定时间内,限制发送请求的频率 & 应用场景-表单验证和关键字搜索

本文详细介绍了函数防抖的概念及其在实际中的应用,如表单验证和关键字搜索。通过示例代码展示了如何在Vue中实现输入框关键字搜索时限制接口请求的频率,以提高性能。函数防抖确保在特定时间内,只有最后一次操作才会触发执行,避免了频繁请求导致的性能问题。

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

关键字防抖效果——接口调用时进行防抖处理 & 函数防抖:特定时间内,限制发送请求的频率 & 应用场景-表单验证和关键字搜索

函数防抖:限制发送请求的频率

现象:每输入一次,就请求一次接口;频繁请求,降低性能

在这里插入图片描述

  • 防止发送请求的频率
handleInput() {
  // 定时任务在延时时间范围内,如果被销毁,那么就不会再出发
  // 函数防抖debounce:在指定时间内没有触发特定条件(输入框字符变化),那么就执行一次任务(发送一次请求)
  clearTimeout(this.timer)
  this.timer = setTimeout(async ()=>{
    let res = await request('goods/qsearch', {query: this.keyword})
    this.resultList = res.data.message
  }, 1000)
}
实例

第一步:使用定时任务

  data () {
    return {
      // 定时任务标记,默认为空
      timer: null
    }
  }

第二步:函数防抖,限制发送请求的频率;延迟时间,可以自定义

结构

    <!-- 顶部搜索栏 -->
    <div class="search">
      <div class="search-content">
        <!-- 输入框 -->
        <div class="search-input">
          <icon type='search' size='16'/>
          <input @input='queryData' v-model='keyword' placeholder="请输入关键字" />
        </div>
        <!-- 取消按钮 -->
        <button class="cancel" v-if='keyword' @click='handleCancel'>取消</button>
        <!-- 搜索的结果 -->
        <div class="search-modal" v-if='keyword'>
          <div :key='item.goods_id' v-for='item in list' class="search-item">
            {{item.goods_name}}
          </div>
        </div>
      </div>
    </div>

方法

  methods: {
    queryData () {
      // 根据关键字查询匹配的商品列表
      // 限制请求发送的频率
           // 如果延时任务在触发之前被销毁,那么该任务就从时间队列中清除掉了
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        let res = await request('goods/qsearch', {
          query: this.keyword
        })
        this.list = res
      }, 1000)
       // 函数防抖 debounce :连续固定时间内(1秒),如果不触发条件(输入框的字符变化),那么就执行一次任务(发送请求)
      // 函数防抖的应用场景:表单验证(表单中输入内容停止时进行验证)
    },
  }

图解

在这里插入图片描述

函数防抖应用:

多次输入,只请求了一次;证明接口的请求频率,已经被限制成功

在这里插入图片描述

函数防抖 debounce定义 :

连续固定时间内(1秒),如果不触发条件(输入框的字符变化),那么就执行一次任务(发送请求)

函数防抖的应用场景:

表单验证(表单中输入内容停止时进行验证)

### JavaScript 中函数与方法的区别 #### 定义方式 在 JavaScript 中,函数可以通过多种方式进行定义。一种常见的形式是通过 **函数声明** 来创建函数[^1]。例如: ```javascript function greet(name) { console.log(`Hello, ${name}!`); } greet(&#39;Alice&#39;); ``` 另一种常见的方式是使用 **匿名函数表达式** 或箭头函数来定义函数[^2]。 ```javascript const add = function(a, b) { return a + b; }; const multiply = (a, b) =&gt; a * b; console.log(add(3, 5)); // 输出8 console.log(multiply(4, 6)); // 输出24 ``` 而方法则是指绑定到对象上的函数。它通常作为对象的一个属性存在,并且可以在该对象的作用域内访问 `this` 关键字以引用当前对象实例。 ```javascript const person = { name: &#39;Bob&#39;, sayName: function() { console.log(this.name); } }; person.sayName(); // 输出 Bob ``` #### 区别分析 虽然函数方法都可以用来执行一段代码逻辑,但在实际应用中有显著的不同之处。主要表现在以下几个方面: - **调用上下文 (`this`)** 方法总是依附于某个对象,在调用会自动将 `this` 绑定到所属的对象上;然而独立的函数则不会默认拥有这样的行为,除非显式指定或者借助某些机制(如 `.call()`、`.apply()` `.bind()`)改变其作用域。 - **定义位置** 函数可以单独存在于全局范围内或嵌套在其他结构内部,而方法必须属于某一特定对象的一部分。 - **应用场景** 当需要实现通用功能而不依赖任何具体数据状态的候适合采用普通函数的形式;反之当操作涉及针对某类实体的数据处理,则更倾向于设计成相应类型的成员方法。 #### 防抖与节流的应用场景说明 除了上述基本概念外,还有一种特殊的技术模式值得提及&mdash;&mdash;即防抖(debounce)与节流(throttle),这两种技术经常应用于优化频繁触发事件处理器性能问题之上,比如窗口整大小(resize),滚动(scroll)等情况下的监听器设置等[^3]。 对于那些希望控制连续多次快速点击按钮或其他交互动作只响应首次的情况来说,&ldquo;函数节流&rdquo;的理念就显得尤为重要了。这意味着即使用户持续不断地发出请求信号,在预设的时间间隔期间也仅仅允许其中的一次生效而已。 --- ### 示例代码展示 以下是基于前面提到的知识点编写的一些简单例子: ```javascript // 普通函数示例 function calculateArea(radius){ const pi = Math.PI; return pi*radius*radius; } let areaOfCircle=calculateArea(7); // 计算半径为7厘米圆面积 console.log(areaOfCircle); // 对象中的方法示例 class Rectangle{ constructor(width,height){ this.width=width; this.height=height; } getPerimeter(){ return 2*(this.width+this.height); } } var rect=new Rectangle(10,5); console.log(rect.getPerimeter()); // 获取矩形周长 // 节流函数模拟 function throttle(func,delay){ let lastCallTime=null; return function(...args){ const now=Date.now(); if(!lastCallTime || now-lastCallTime&gt;=delay ){ func.apply(this,args); lastCallTime=now; } }; } window.addEventListener(&#39;resize&#39;,throttle(function(event){ alert(&quot;Window resized!&quot;); },1000)); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值