Javascript Yup-设置超时后的异步验证

为了保存申请，下面的代码在用户输入值后使用setTimeout。如果输入了一个新的，超时将被取消

我想确认下面的方法是否正确，因为当超时被清除时，它不会像异步验证函数“test”所期望的那样返回承诺

---

超时后，可以按以下方式使用异步验证：

const validationSchema = Yup.object({
  name: Yup.string("Enter your name").required("Name is required")
  .test("checkDuplUsername", "Username already taken", function(value) {
    if (!value) {
      const isDuplicateExists = await checkDuplicate(value);
      console.log("isDuplicateExists = ", isDuplicateExists);
      return !isDuplicateExists;
    }
    // WHEN THE VALUE IS EMPTY RETURN `true` by default
    return true;
  }),
});

function checkDuplicate(valueToCheck) {
  return new Promise(async (resolve, reject) => {
    let isDuplicateExists;

    setTimeout(() => {
      // CHECK HERE FOR DUPLICATE
      if (valueToCheck === "test") {
        isDuplicateExists = true;
        resolve(isDuplicateExists);
      } else {
        isDuplicateExists = false;
        resolve(isDuplicateExists);
      }
    }, 3000)
  });
}

---

首先，

clearTimeout

甚至无法访问计时器来清除它，因为它是在承诺的范围内声明的。但是它正在工作。你可以查一下。如果您快速按键，console.log（“此处”）只会被调用一次。如果删除clearTimeout，它将被多次调用。

const validationSchema = Yup.object({
  name: Yup.string("Enter your name").required("Name is required")
  .test("checkDuplUsername", "Username already taken", function(value) {
    if (!value) {
      const isDuplicateExists = await checkDuplicate(value);
      console.log("isDuplicateExists = ", isDuplicateExists);
      return !isDuplicateExists;
    }
    // WHEN THE VALUE IS EMPTY RETURN `true` by default
    return true;
  }),
});

function checkDuplicate(valueToCheck) {
  return new Promise(async (resolve, reject) => {
    let isDuplicateExists;

    setTimeout(() => {
      // CHECK HERE FOR DUPLICATE
      if (valueToCheck === "test") {
        isDuplicateExists = true;
        resolve(isDuplicateExists);
      } else {
        isDuplicateExists = false;
        resolve(isDuplicateExists);
      }
    }, 3000)
  });
}