Javascript foreach循环多次调用ajax
Javascript foreach循环多次调用ajax
提问于 2020-01-14 21:08:19
因此，我正在尝试创建几个板的待办事项列表。每个板都有添加项目按钮。如果我点击add item按钮，它会打开插入任务信息的模式。但是，如果我多次单击add item按钮，然后将信息插入到modal，然后按save，ajax就会触发多次单击add item按钮。我怎样才能避免这种情况呢？
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);
}
});
});
});
});回答 2
Stack Overflow用户
发布于 2020-01-14 21:14:27
您可以使用一个变量，比如busy，来验证AJAX请求是否已经在进行中。
您可以在AJAx的beforeSend回调中设置此变量，然后在finally回调中将其更新回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;
}
});
}
});
});
});这是一个非常简单的解决方案，但它是有效的。
Stack Overflow用户
发布于 2020-01-14 21:24:30
在这种情况下，您可以使用addNewBtn.onclick = function () {}来覆盖前一个侦听器。但不建议在另一个监听器中注册监听器。试着把它搬出去。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59734426
复制相关文章
相似问题
腾讯云开发者
