Question

我有一个网站，用户可以使用他们的电子邮件创建帐户。在注册期间，我想运行一个函数，直到用户停止输入才能运行。此函数将检查以确保输入到输入中的值确实是电子邮件，如果是电子邮件，它将向后端服务器发送快速 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();

  }, []);

Answer 1

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

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

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

更新：

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

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

1 个答案: