即使从异步侦听器返回控件,Fetch()仍在执行

我有一个Edit Button onClick,调用editTask()函数,并且在该函数中,我希望用户通过给用户一个带有某些样式的编辑文本框来编辑其任务,如果用户按ENTER键,我将删除该样式并检查输入的值是否为空,如果是,则给出错误“任务名称应至少包含一个字符,再试一次”,然后在6秒后将隐藏错误消息并返回控件

并且如果addEventListener中的所有条件都不令人满意,那么我们将通过Fetch('/ editTask')到editTask端点进行请求

但是现在的问题是什么时候

  1. 我输入一个空值,然后按Enter键,它经历了第二个条件,在完成所有任务后,它遇到了return语句,它返回了控件,并且没有转到fetch(),像往常一样好,但是在此之后,当我写实值(不为空),则直接进入获取,但调用两次,而不是一次不知道为什么
  2. 如果我第一次输入空值,它将遇到return语句,并且返回控件不会转到fetch()并给出错误消息,如果我第二次执行此操作,则此后不再转到fetch()现在,如果我输入实值,然后直接转到fetch(),但它调用了fetch()3次,而不是一次

so basically fetch is calling wrong attempts + right attempt times

如果我键入3次空值,那么所有3次它都会给出错误并返回控件,但是在此之后,如果我输入实值,则fetch()称为4次(3 + 1)

甚至在条件正确的情况下使用return语句返回控件后

这是我的.js代码(客户端)
function editTask(event, btn) {
  let label = btn.parentNode.parentElement.querySelector("[for]");
  let taskName = btn.parentNode.parentElement.className
    .split(" ")[1]
    .split("_")[1];
  let taskListForBorder = document.getElementsByClassName("task-list")[0];
  let errTag = document.getElementsByTagName("p")[0];

  let oldLabelText = label.innerText;

  label.contentEditable = true;
  label.setAttribute("id", "true");
  label.style.cursor = "auto";
  label.style.outline = "none";
  label.style.borderBottom = "2px solid #11998e";

  label.addEventListener("keyup", function (event) {
    if (event.keyCode === 13) {
      label.blur();
      label.contentEditable = false;
      label.setAttribute("id", "false");
      label.style.cursor = "pointer";
      label.style.borderBottom = "none";
      let editedTaskName = label.innerText.split("\n").join("");
      if (editedTaskName === oldLabelText) {
        label.innerHTML = label.innerText.split("\n").join("");
        return;
      } else if (editedTaskName === "") {
        console.log(label.innerText);
        label.innerHTML = oldLabelText;
        errTag.className = "error";
        errTag.innerHTML =
          "Task Name should have atleast one character, Try Again";
        taskListForBorder.style.borderTopRightRadius = "1px";
        taskListForBorder.style.borderTopLeftRadius = "1px";
        setTimeout(function () {
          errTag.removeAttribute("class");
          errTag.innerHTML = "";
          taskListForBorder.style.borderTopRightRadius = "9px";
          taskListForBorder.style.borderTopLeftRadius = "9px";
          // location.reload(false);
          return;
        }, 6000);
      } else {
        console.log("came");
        fetch("/editTask", {
          method: "POST", // or 'PUT'
          body: JSON.stringify({ editedTaskName, taskName }), // data can be `string` or {object}!
          headers: {
            "Content-Type": "application/json",
          },
        })
          .then((response) => response.json())
          .then((data) => {
            console.log("Success:", data);
            location.reload(true);
          });
          return;
      }
    }
  });
  event.stopPropagation();
  return
}

我在服务器端打印值

服务器端NodeJs代码
exports.editTask = (req, res, next) => {
  let editedTaskName = req.body.editedTaskName;
  let taskNameId = req.body.taskName;
  console.log(editedTaskName)
  console.log(typeof taskNameId)
  ....

}

我是新来的,如果没有nooby错误,对不起,坦诚地提出您的建议:)

评论