我一直在做一个数据转换项目。在处理小数据集时，我成功地执行了代码。然而，当处理较大的数据集时，JavaScript执行时间就成了一个问题。例如，处理15，000条记录可能需要大约4到5秒。这可能是有问题的，因为如果用户看不到任何进展，他们可能会变得不耐烦，导致他们反复按下按钮。
为了解决这个问题，我考虑实现一个加载器来表明系统正在积极处理用户的请求。所以，我想出了这样的东西：

$("#optDuplicateCol").click(function(){
    
   if(verifyColumnSelection()){
    showSweetAlertLoader();
     // Get references to various elements in the table
    var q_table = $(".q-table");
    var q_table_header_row =$("#q_table_header_row");
    var selectedHeaderTitle = $(".q-header-selected").text();
    var q_table_tbody = $("#q_table_tbody");
    // Find selected TD elements and extract their data
    var selectedTds = q_table.find('td.q-col-selected');
    var dataArray = []; 
    selectedTds.each(function() {
      var qTableDataValue = $(this).find('.q-table-data').text();
      dataArray.push(qTableDataValue.trim());
    });
     // Append duplicated column data to each table row
    q_table_tbody.find('tr').each(function(index) {
         var tdHtml = "<td><div class='q-table-data'>" + dataArray[index] + "</div></td>";
         $(this).append(tdHtml);
     });
     // Add a header for the copied column
     copiedColHeader="<th scope='col' class='q-table-data-header' onclick='handleColumnSelection(this)'>"+selectedHeaderTitle+" - Copy</th>";
       q_table_header_row.append(copiedColHeader);
       closeSweetAlertLoader();
   }
  
  });

字符串
问题是，SweetAlert只是 Flink 了一毫秒，然后消失，这发生在列被复制时
到目前为止，我解决这个问题的尝试是这样的

$("#optDuplicateCol").click(function () {
  if (verifyColumnSelection()) {
    showSweetAlertLoader()
      .then(() => DulicateCols())
      .then(() => {
        closeSweetAlertLoader();
        // Other code to run after the operation is complete
      })
      .catch(error => {
        console.error(error);
        closeSweetAlertLoader();
        // Handle errors
      });
  }
});

async function DulicateCols() {
  if (verifyColumnSelection()) {
   
    // Get references to various elements in the table
    var q_table = $(".q-table");
    var q_table_header_row = $("#q_table_header_row");
    var selectedHeaderTitle = $(".q-header-selected").text();
    var q_table_tbody = $("#q_table_tbody");
    // Find selected TD elements and extract their data
    var selectedTds = q_table.find('td.q-col-selected');
    var dataArray = [];
    selectedTds.each(function () {
      var qTableDataValue = $(this).find('.q-table-data').text();
      dataArray.push(qTableDataValue.trim());
    });
    // Append duplicated column data to each table row
    await Promise.all(
      q_table_tbody.find('tr').map(async function (index) {
        var tdHtml = "<td><div class='q-table-data'>" + dataArray[index] + "</div></td>";
        $(this).append(tdHtml);
      })
    );
    // Add a header for the copied column
    copiedColHeader = "<th scope='col' class='q-table-data-header' onclick='handleColumnSelection(this)'>" + selectedHeaderTitle + " - Copy</th>";
    q_table_header_row.append(copiedColHeader);
   
  }
}

function showSweetAlertLoader() {
  return new Promise(resolve => {
    Swal.fire({
      title: 'Loading...',
      allowEscapeKey: false,
      allowOutsideClick: false,
      didOpen: () => {
        // Additional setup if needed
        resolve(); // Resolve the Promise when the Sweet Alert is ready
      },
    });
  });
}

function closeSweetAlertLoader() {
    Swal.close();
}