ant design vue 输入框@blur事件触发了一次，却走了无数次？

Question

handlePoliceSituation方法失焦之后走了无数次导致页面卡主，明明只触发了一次

<FormItem name="barxm" class="enter-x" label="姓名：">
              <Input
                style="width: 230px"
                size="large"
                v-model:value="formData.barxm"
                placeholder="请输入姓名"
                @blur="handlePoliceSituation"
                @change="inputValue"
                class="fix-auto-fill"
              />
            </FormItem>
async function handlePoliceSituation() {
    const data = formData;
    let user = JSON.parse(localStorage.getItem('user'));
    console.log(1)
    if (!data.barxm || !data.barzjhm || !data.barzz) return;
    if (user) data.lrrjh = user.jinghao;
    let jqData = {
      barq: formData.barcsrq,
      barxm: data.barxm,
      fxdd: data.barzz,
    };
    try {
      console.log(2)
      let resJqData = await handlePoliceSituation({ ...jqData, mode: 'none' });
      if (resJqData.length) {
        createErrorModal({
          title: '警情',
          content: '此警情重复！',
        });
      }
      return false;
    } catch (error) {
      console.log(3)
      createErrorModal({
        title: '错误提示',
        content: (error as unknown as Error).message || '网络异常，请检查您的网络连接是否正常！',
        getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
      });
      return false;
    } finally {
      console.log(4)
    }
  }

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【您想要解决的问题】：您遇到的问题是在使用 Ant Design Vue 的 <Input> 组件时，@blur 事件触发了一次，但是 handlePoliceSituation 方法却执行了多次，导致页面卡顿。

【图片内容】：您上传的图片看起来像是一个开发者工具的截图，显示了多个重复的日志条目，这些日志条目可能是由于 handlePoliceSituation 方法被多次调用而产生的。

【问题出现原因】：问题可能出现的原因有几个：

1. handlePoliceSituation 方法可能在其他地方也被调用了，导致即使只有一个 @blur 事件，该方法也被执行了多次。
2. 如果 handlePoliceSituation 方法内部有异步操作，并且在某个地方使用了递归或者循环调用，也可能导致多次执行。
3. 如果 formData 对象在组件内部被多个 <Input> 组件共享，并且这些 <Input> 组件的事件处理函数都指向同一个 handlePoliceSituation 方法，那么当任何一个 <Input> 失焦时，都可能触发这个方法。

【问题解决方案】：为了解决这个问题，您可以尝试以下步骤：

1. 确保 handlePoliceSituation 方法只在 <Input> 的 @blur 事件中被调用。
2. 检查是否有其他地方不当心地调用了 handlePoliceSituation 方法。
3. 如果方法内部有异步操作，确保没有导致无限递归或者循环调用的逻辑。
4. 使用防抖（debounce）或者节流（throttle）技术来限制事件处理函数的调用频率。

【提供代码】：以下是一个简单的防抖函数示例，您可以将其应用到 handlePoliceSituation 方法上：

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// 使用防抖包装后的 handlePoliceSituation 方法
const debouncedHandlePoliceSituation = debounce(handlePoliceSituation, 500);

// 在模板中使用防抖方法
<FormItem name="barxm" class="enter-x" label="姓名：">
  <Input
    style="width: 230px"
    size="large"
    v-model:value="formData.barxm"
    placeholder="请输入姓名"
    @blur="debouncedHandlePoliceSituation"
    @change="inputValue"
    class="fix-auto-fill"
  />
</FormItem>

【代码运行方式】：您需要在 Vue 项目中运行这段代码，确保您已经安装了 Ant Design Vue。

【代码预期运行结果】：使用防抖函数后，即使 @blur 事件触发了，handlePoliceSituation 方法也不会被频繁调用，而是在指定的等待时间（这里是 500 毫秒）后执行一次。

【推荐相关链接】：

• Ant Design Vue 文档
• Vue.js 官方文档
• 防抖和节流的原理及实现