用户停止输入后运行电子邮件检查答案

【问题标题】：Run email check after user stops typing用户停止输入后运行电子邮件检查
【发布时间】：2021-08-01 22:25:28
【问题描述】：

我有一个网站，用户可以使用他们的电子邮件创建帐户。在注册期间，我想运行一个等待用户停止输入才能运行的函数。此函数将检查以确保输入的值确实是电子邮件，如果是电子邮件，它将向后端服务器发送快速 API 请求以检查该电子邮件地址是否已被使用。为此，我尝试使用 lodash 的 debounce 方法，但我设法完成的只是使该函数针对输入的每个字符运行，并且每次都对函数进行 debounce。怎样才能达到我想要的效果？

这是我为我的输入运行 onChange 的函数：

const validateEmailChangeHandler = (e) => {
    const { name, value } = e.target;
    setDataPayload({ ...dataPayload, [name]: value });

    debouncedEmailCheck(value);
  };

// debouncedEmailCheck

const debouncedEmailCheck = useCallback((str) => {
    const test = _.debounce(
      () => {
        if(validator.isEmail(str)) {
          console.log('input is email')
        } else {
          console.log('input is not an email')
        }
      },
      1000,
      false
    );

   

     test();

  }, []);

【问题讨论】：

标签： reactjs

【解决方案1】：

假设您将该函数附加到一个按键事件，预计它将在每次按键时运行。

为了减轻每次按键时的检查，您有 2 (3) 个选项。

使用正则表达式验证电子邮件，仅当检测到有效的电子邮件格式时才进行调用。
检查输入何时失去用户焦点。
某些机制（如模糊哈希或纯文本）在页面加载时本地存储电子邮件，这将允许您以最小的更改按原样运行该功能 - 但我不推荐此选项。

更新：

看看这个 - 这取决于您的实施和要求：

【讨论】：

我让它在 onChange 上运行。按键事件是否更好？