英文:
Insert spinner on function javascript
问题
在JavaScript函数中插入旋转器。
大家好，我正在学习JavaScript的初级知识，我发现自己无法插入一个旋转器。我编写了以下代码，你能帮助我理解问题吗？
document.getElementById('insert').addEventListener('click',
function(event) {
event.preventDefault();
var spinner = document.getElementById("spinner");
spinner.style.display = "";
insertDataToDatabase(results.data);
spinner.style.display = "none";
}, false);
function insertDataToDatabase(data) {
data_noheader = data.slice(1);
for (i = 0; i < data_noheader.length; i++) {
$.ajax({
url: 'index.php',
type: 'POST',
dataType: 'json',
data: {
action: 'import',
data: data_noheader[i]
},
success: function(response) {
},
error: function(response) {
},
});
}
}
我尝试在循环的第0个索引处激活旋转器，并在insertDataToDatabase函数完成后停用旋转器。
英文:
Insert spinner on function JavaScript.
Hi everyone, I'm taking my first steps with JavaScript and I find myself unable to insert a spinner
I wrote the following code, could you help me understand the problem?
document.getElementById('insert').addEventListener('click',
function(event) {
event.preventDefault();
var spinner = document.getElementById("spinner");
spinner.style.display = "";
insertDataToDatabase(results.data);
spinner.style.display = "none";
}, false);
function insertDataToDatabase(data) {
data_noheader = data.slice(1);
for(i=0;i<data_noheader.length;i++){
$.ajax({
url: 'index.php',
type: 'POST',
dataType: 'json',
data: {
action: 'import',
data: data_noheader[i]
},
success: function(response) {
},
error: function(response) {
},
});
}
}`
I was trying to activate the spinner at index 0 of the loop and deactivate the spinner at the completion of the insertDataToDatabase function.
答案1
得分: 0
你应该使用Promises或async/await来处理这个问题。
以下是示例：
document.getElementById("insert").addEventListener(
"click",
async function (event) {
event.preventDefault();
var spinner = document.getElementById("spinner");
spinner.style.display = "";
await insertDataToDatabase(results.data);
spinner.style.display = "none";
},
false
);
async function insertDataToDatabase(data) {
data_noheader = data.slice(1);
for (i = 0; i < data_noheader.length; i++) {
await $.ajax({
url: "index.php",
type: "POST",
dataType: "json",
data: {
action: "import",
data: data_noheader[i],
},
success: function (response) {},
error: function (response) {},
});
}
}
或者更好的解决方案：
document.getElementById("insert").addEventListener(
"click",
async function (event) {
event.preventDefault();
var spinner = document.getElementById("spinner");
spinner.style.display = "";
await insertDataToDatabase(results.data);
spinner.style.display = "none";
},
false
);
async function insertDataToDatabase(data) {
data_noheader = data.slice(1);
await Promise.all(data_noheader.map((row) => {
return $.ajax({
url: "index.php",
type: "POST",
dataType: "json",
data: {
action: "import",
data: row,
},
success: function (response) {},
error: function (response) {},
});
}));
}
英文:
You should handle this with Promises or async/await.
Here are the example:
document.getElementById("insert").addEventListener(
"click",
async function (event) {
event.preventDefault();
var spinner = document.getElementById("spinner");
spinner.style.display = "";
await insertDataToDatabase(results.data);
spinner.style.display = "none";
},
false
);
async function insertDataToDatabase(data) {
data_noheader = data.slice(1);
for (i = 0; i < data_noheader.length; i++) {
await $.ajax({
url: "index.php",
type: "POST",
dataType: "json",
data: {
action: "import",
data: data_noheader[i],
},
success: function (response) {},
error: function (response) {},
});
}
}
Or even a bit better solution:
document.getElementById("insert").addEventListener(
"click",
async function (event) {
event.preventDefault();
var spinner = document.getElementById("spinner");
spinner.style.display = "";
await insertDataToDatabase(results.data);
spinner.style.display = "none";
},
false
);
async function insertDataToDatabase(data) {
data_noheader = data.slice(1);
await Promise.all(data_noheader.map((row) => {
return $.ajax({
url: "index.php",
type: "POST",
dataType: "json",
data: {
action: "import",
data: row,
},
success: function (response) {},
error: function (response) {},
});
}));
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论