Insert spinner on function javascript

Question

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.

Answer 1

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) {},
    });
  }));
}