在 JavaScript 函数中插入旋转器。

huangapple
go评论100阅读模式
英文:

Insert spinner on function javascript

问题

在JavaScript函数中插入旋转器。

大家好，我正在学习JavaScript的初级知识，我发现自己无法插入一个旋转器。我编写了以下代码，你能帮助我理解问题吗？

  1. document.getElementById('insert').addEventListener('click',
  2.     function(event) {
  3.         event.preventDefault();
  4.         var spinner = document.getElementById("spinner");
  5.         spinner.style.display = "";
  6.         insertDataToDatabase(results.data);
  7.         spinner.style.display = "none";
  8.     }, false);
  10. function insertDataToDatabase(data) {
  11.     data_noheader = data.slice(1);
  13.     for (i = 0; i < data_noheader.length; i++) {
  14.         $.ajax({
  15.             url: 'index.php',
  16.             type: 'POST',
  17.             dataType: 'json',
  18.             data: {
  19.                 action: 'import',
  20.                 data: data_noheader[i]
  21.             },
  22.             success: function(response) {
  24.             },
  25.             error: function(response) {
  27.             },
  28.         });
  29.     }
  30. }

我尝试在循环的第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?

  1. document.getElementById(&#39;insert&#39;).addEventListener(&#39;click&#39;, 
  2.     function(event) {
  3.     event.preventDefault();
  4.     var spinner = document.getElementById(&quot;spinner&quot;);														 
  5.     spinner.style.display = &quot;&quot;;															 
  6.     insertDataToDatabase(results.data);															 
  7.     spinner.style.display = &quot;none&quot;;															
  8.      }, false);
  10.     function insertDataToDatabase(data) {
  11. 		
  12.     data_noheader = data.slice(1);
  13. 		
  14.  		for(i=0;i&lt;data_noheader.length;i++){
  15. 			$.ajax({
  16. 				url: &#39;index.php&#39;,
  17. 				type: &#39;POST&#39;,
  18. 				dataType: &#39;json&#39;,
  19. 				data: {
  20. 					action: &#39;import&#39;,
  21. 					data: data_noheader[i]
  22. 					},
  23. 					success: function(response) {
  25. 					},
  26. 					error: function(response) {
  27. 					},
  28. 			});
  29. 		}
  30. 	}`

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来处理这个问题。

以下是示例：

  1. document.getElementById("insert").addEventListener(
  2.   "click",
  3.   async function (event) {
  4.     event.preventDefault();
  5.     var spinner = document.getElementById("spinner");
  6.     spinner.style.display = "";
  7.     await insertDataToDatabase(results.data);
  8.     spinner.style.display = "none";
  9.   },
  10.   false
  11. );
  13. async function insertDataToDatabase(data) {
  14.   data_noheader = data.slice(1);
  16.   for (i = 0; i < data_noheader.length; i++) {
  17.     await $.ajax({
  18.       url: "index.php",
  19.       type: "POST",
  20.       dataType: "json",
  21.       data: {
  22.         action: "import",
  23.         data: data_noheader[i],
  24.       },
  25.       success: function (response) {},
  26.       error: function (response) {},
  27.     });
  28.   }
  29. }

或者更好的解决方案：

  1. document.getElementById("insert").addEventListener(
  2.   "click",
  3.   async function (event) {
  4.     event.preventDefault();
  5.     var spinner = document.getElementById("spinner");
  6.     spinner.style.display = "";
  7.     await insertDataToDatabase(results.data);
  8.     spinner.style.display = "none";
  9.   },
  10.   false
  11. );
  13. async function insertDataToDatabase(data) {
  14.   data_noheader = data.slice(1);
  16.   await Promise.all(data_noheader.map((row) => {
  17.     return $.ajax({
  18.       url: "index.php",
  19.       type: "POST",
  20.       dataType: "json",
  21.       data: {
  22.         action: "import",
  23.         data: row,
  24.       },
  25.       success: function (response) {},
  26.       error: function (response) {},
  27.     });
  28.   }));
  29. }
英文:

You should handle this with Promises or async/await.

Here are the example:

  1. document.getElementById(&quot;insert&quot;).addEventListener(
  2.   &quot;click&quot;,
  3.   async function (event) {
  4.     event.preventDefault();
  5.     var spinner = document.getElementById(&quot;spinner&quot;);
  6.     spinner.style.display = &quot;&quot;;
  7.     await insertDataToDatabase(results.data);
  8.     spinner.style.display = &quot;none&quot;;
  9.   },
  10.   false
  11. );
  13. async function insertDataToDatabase(data) {
  14.   data_noheader = data.slice(1);
  16.   for (i = 0; i &lt; data_noheader.length; i++) {
  17.     await $.ajax({
  18.       url: &quot;index.php&quot;,
  19.       type: &quot;POST&quot;,
  20.       dataType: &quot;json&quot;,
  21.       data: {
  22.         action: &quot;import&quot;,
  23.         data: data_noheader[i],
  24.       },
  25.       success: function (response) {},
  26.       error: function (response) {},
  27.     });
  28.   }
  29. }

Or even a bit better solution:

  1. document.getElementById(&quot;insert&quot;).addEventListener(
  2.   &quot;click&quot;,
  3.   async function (event) {
  4.     event.preventDefault();
  5.     var spinner = document.getElementById(&quot;spinner&quot;);
  6.     spinner.style.display = &quot;&quot;;
  7.     await insertDataToDatabase(results.data);
  8.     spinner.style.display = &quot;none&quot;;
  9.   },
  10.   false
  11. );
  13. async function insertDataToDatabase(data) {
  14.   data_noheader = data.slice(1);
  16.   await Promise.all(data_noheader.map((row) =&gt; {
  17.     return $.ajax({
  18.       url: &quot;index.php&quot;,
  19.       type: &quot;POST&quot;,
  20.       dataType: &quot;json&quot;,
  21.       data: {
  22.         action: &quot;import&quot;,
  23.         data: row,
  24.       },
  25.       success: function (response) {},
  26.       error: function (response) {},
  27.     });
  28.   }));
  29. }

huangapple
  • 本文由 发表于 2023年5月22日 18:44:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/76305384.html
  • ajax
  • javascript
  • jquery
  • spinner
  • sql-insert
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定