jquery 在函数javascript上插入微调器

jutyujz0  于 2023-05-28  发布在  jQuery
关注(0)|答案(1)|浏览(248)

在函数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函数完成时停用微调器。

ztigrdn8

ztigrdn81#

您应该使用Promisesasync/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) {},
    });
  }));
}

相关问题