Javascript foreach循环多次调用ajax

因此，我试图创建一个包含多个板的待办事项列表。每个板都有添加项目按钮。如果单击“添加项目”按钮，它将打开插入任务信息的模式。但如果我多次单击AddItem按钮，然后将信息插入到modal，然后按SaveAjax，则触发的次数与我单击AddItem按钮的次数相同。我怎样才能避免这种情况

var addNewItems = document.querySelectorAll("#addNewItem");
var addNewSubmits = document.querySelectorAll("#listItemSave");
addNewItems.forEach(function(addNewItem) {
  addNewItem.addEventListener("click", function(e) {
    var newItemModal = this.nextElementSibling;
    newItemModal.classList.toggle("hidden");
    var addNewBtn = newItemModal.querySelector("#listItemSave");
    //current board
    var board = this.closest("div.list");
    //current list
    var list = board.querySelector(".todo--items");

    addNewBtn.addEventListener  ("click", function(e) {
      //current board id
      var boardId = board.dataset.boardid;
      //current title
      var title = newItemModal.querySelector("#listTitle");
      var titleValue = title.value;
      //current content
      var content = newItemModal.querySelector("#listTextarea");
      var contentValue = content.value;


      $.ajax({
        type: "POST",
        url: "add.php",
        data: { content: contentValue , title: titleValue , listid: boardId  },

        success: function(data, textStatus, jqXHR) {

        $("#todoItems-" + id + "").append(data);

       }
      });

    });
  });
});

---

您可以使用一个变量，比如说

busy

，来验证AJAX请求是否尚未进行

您可以在AJAx的

beforeSend

回调中设置此变量，然后在

finally

callbac中将其更新回false:

var addNewItems = document.querySelectorAll("#addNewItem");
var addNewSubmits = document.querySelectorAll("#listItemSave");
addNewItems.forEach(function (addNewItem) {
    addNewItem.addEventListener("click", function (e) {
        var newItemModal = this.nextElementSibling;
        newItemModal.classList.toggle("hidden");
        var addNewBtn = newItemModal.querySelector("#listItemSave");
        //current board
        var board = this.closest("div.list");
        //current list
        var list = board.querySelector(".todo--items");

        var busy = false;

        addNewBtn.addEventListener("click", function (e) {
            //current board id
            var boardId = board.dataset.boardid;
            //current title
            var title = newItemModal.querySelector("#listTitle");
            var titleValue = title.value;
            //current content
            var content = newItemModal.querySelector("#listTextarea");
            var contentValue = content.value;

            if (!busy) {
                $.ajax({
                    type: "POST",
                    url: "add.php",
                    beforeSend: () => {
                        busy = true;
                    }
                    data: {
                        content: contentValue,
                        title: titleValue,
                        listid: boardId
                    },
                    success: function (data, textStatus, jqXHR) {
                        $("#todoItems-" + id + "").append(data);
                    },
                    complete: () => {
                        busy = false;
                    }
                });
            }
        });
    });
});

---

这是一个非常简单的解决方案，但很有效。

您可以使用一个变量，比如说

busy

，来验证AJAX请求是否尚未进行

您可以在AJAx的

beforeSend

回调中设置此变量，然后在

finally

callbac中将其更新回false:

var addNewItems = document.querySelectorAll("#addNewItem");
var addNewSubmits = document.querySelectorAll("#listItemSave");
addNewItems.forEach(function (addNewItem) {
    addNewItem.addEventListener("click", function (e) {
        var newItemModal = this.nextElementSibling;
        newItemModal.classList.toggle("hidden");
        var addNewBtn = newItemModal.querySelector("#listItemSave");
        //current board
        var board = this.closest("div.list");
        //current list
        var list = board.querySelector(".todo--items");

        var busy = false;

        addNewBtn.addEventListener("click", function (e) {
            //current board id
            var boardId = board.dataset.boardid;
            //current title
            var title = newItemModal.querySelector("#listTitle");
            var titleValue = title.value;
            //current content
            var content = newItemModal.querySelector("#listTextarea");
            var contentValue = content.value;

            if (!busy) {
                $.ajax({
                    type: "POST",
                    url: "add.php",
                    beforeSend: () => {
                        busy = true;
                    }
                    data: {
                        content: contentValue,
                        title: titleValue,
                        listid: boardId
                    },
                    success: function (data, textStatus, jqXHR) {
                        $("#todoItems-" + id + "").append(data);
                    },
                    complete: () => {
                        busy = false;
                    }
                });
            }
        });
    });
});

---

这是一个非常简单的解决方案，但它可以工作。

在本例中，您可以使用

addNewBtn.onclick=function（）{}

来重叠上一个侦听器。

---

但不建议在另一个侦听器中注册侦听器。尝试将其移出。

在这种情况下，您可以使用

addNewBtn.onclick=function（）{}

来重叠上一个侦听器。

---

但不建议在另一个侦听器中注册侦听器。尝试将其移出。

为什么要在ID选择器上使用querySelectorAll？每次执行附加到

addNewItem

的事件处理程序时，它都会将另一个事件处理程序添加到

AddNewTN

。因此，如果您单击三次

addNewItem

，然后单击一次

addnewtn

，您将在第二次单击中执行三个处理程序。您如何获得一件事？addnewitems是ID addNewItem。ID是一个元素。（至少应该是这样）@VLAZ那么，如果我点击几次按钮，如何只让一个Ethandler平衡呢？@BryanDellinger是的，我知道。它现在是ID，因为我只有一块板，但现在我有几个板使用这个添加新模式，所以我将把ID更改为类。谢谢通知。为什么要在ID选择器上使用querySelectorAll？每次执行附加到

addNewItem

的事件处理程序时，它都会将另一个事件处理程序添加到

AddNewTN

。因此，如果您单击三次

addNewItem

，然后单击一次

addnewtn

，您将在第二次单击中执行三个处理程序。您如何获得一件事？addnewitems是ID addNewItem。ID是一个元素。（至少应该是这样）@VLAZ那么，如果我点击几次按钮，如何只让一个Ethandler平衡呢？@BryanDellinger是的，我知道。它现在是ID，因为我只有一块板，但现在我有几个板使用这个添加新模式，所以我将把ID更改为类。感谢您的通知。由于某些原因，此解决方案对我不起作用。@Martynastregys我没有测试此解决方案，很可能您无法简单地将其复制并粘贴到代码中。但是，您应该尝试理解我所做的，并将其应用到您自己的上下文中。由于某些原因，此解决方案对我不起作用。@Martynastregy我没有测试此解决方案，很可能您不能简单地将其复制并粘贴到代码中。然而，你应该试着理解我所做的，并将其应用到你自己的环境中。