防抖（Debounce）

前端开发中的防抖（Debounce）

• 定义：一种优化高频触发事件的技术，确保函数在连续触发时只执行一次。

即 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行

• 核心原理：设置一个延迟时间（如 300ms），若在延迟内事件再次触发，则重置计时器，直到无新触发后才执行函数。

• 目的：避免高频触发请求（如用户快速输入时），减少服务器压力和无效请求。

• 典型应用：

  • 输入框搜索（避免用户每输入一个字符就发送请求）。
  • 窗口大小调整（避免频繁计算布局）。
  • 按钮提交（防止重复点击）。

例如：

 watch: {
          'obj.words' (newValue) {
            clearTimeout(this.timer) 
            this.timer = setTimeout(async () => {
              const res = await axios({
                url: 'https://applet-base-api-t.itheima.net/api/translate',
                params: {
                  words: newValue
                }
              })
              this.result = res.data.data
              console.log(res.data.data)
            }, 300)
          }
        }

防抖逻辑：

clearTimeout(this.timer)
this.timer = setTimeout(async () => {
  // 异步请求
}, 300)

防抖机制：

• clearTimeout(this.timer)：清除之前的计时器，确保连续触发时只保留最后一次操作。
• setTimeout：延迟 300ms 执行异步请求，若在 300ms 内再次触发，会重置计时器。