Vue使用setTimeout触发PATCH请求导致文本输入框抖动如何解决

你当前的代码存在两个核心问题直接导致输入框抖动：

• 没有对定时器做清除逻辑：用户每输入1个字符就会触发一次set函数，生成1个新的8秒定时器，最终会出现N个定时器先后触发、批量提交保存请求的情况
• 输入状态直接绑定后端返回字段：v-model绑定的计算属性get直接返回后端存储的this.attachment.strValue，每次保存请求完成后如果更新了该字段，会直接覆盖用户正在输入的内容，多次请求交替返回就会出现内容反复回跳、逐字复现的抖动效果

核心逻辑是拆分本地输入状态+防抖提交+状态同步隔离，具体修改如下：

1. 调整数据定义 #

在data中新增本地输入临时变量、定时器存储变量，和后端存储的字段做隔离：

data() {
  return {
    // 存储用户实时输入的本地状态，不会被接口返回直接覆盖
    localStrValue: '',
    // 存储防抖定时器ID，用于清除上一次的延时任务
    saveTimer: null,
    // 原有其他变量保持不变
    waiting: {
      updateAttachment: false
    }
  }
},
// 组件初始化时把后端的默认值同步到本地
mounted() {
  this.localStrValue = this.attachment.strValue
}

2. 替换计算属性为监听逻辑，新增防抖处理 #

删掉原来的strValue计算属性，改为监听本地输入变量，每次输入先清除上一个定时器，保证只有最后一次输入结束8秒后才触发一次保存：

watch: {
  localStrValue(val) {
    // 先清除之前的未触发的定时器
    if (this.saveTimer) clearTimeout(this.saveTimer)
    // 生成新的定时器
    this.saveTimer = setTimeout(() => {
      this.updateAttachment([this.attachment.id, { strValue: val }])
    }, 8000)
  }
}

3. 调整模板绑定，关联本地输入状态 #

把v-model绑定到本地变量，避免后端字段更新直接影响输入：

<b-field label="Description">
  <b-input
    type="textarea"
    v-model="localStrValue"
    :disabled="waiting.updateAttachment"
  >
  </b-input>
</b-field>

4. 可选优化：保存成功后再同步状态到后端字段 #

如果你的updateAttachment请求完成后会自动更新this.attachment.strValue，建议调整为只在保存成功后手动同步，避免请求过程中返回旧值覆盖本地：

// 修改updateAttachment逻辑，示例：
async updateAttachment(params) {
  this.waiting.updateAttachment = true
  try {
    await 你的接口请求方法(params)
    // 保存成功后再把本地输入同步到后端存储的字段
    this.attachment.strValue = this.localStrValue
  } catch (err) {
    // 报错提示逻辑
  } finally {
    this.waiting.updateAttachment = false
  }
}

修改后不会再出现输入抖动问题：

• 防抖逻辑保证8秒内不管输入多少内容，只会触发最后一次保存请求，不会有批量请求冲突
• 本地输入状态和后端存储状态隔离，请求过程中用户的输入不会被接口返回的旧值覆盖
• 如果开启了保存过程中disabled，也能避免用户在请求过程中输入导致的状态不一致

内容的提问来源于stack exchange，提问作者user16741832