jQuery 执行时间和 SweetAlert 加载（项目特定问题）

Question

我一直在从事数据转换项目。在处理小数据集时，我在代码执行方面取得了成功。然而，当处理更大的数据集时，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 只是闪烁一毫秒然后消失，这种情况发生在列完成复制时

到目前为止我解决问题的尝试是这样的

$("#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();
}

Answer 1

在不检查完整代码（HTML 和 JS）的情况下，很难找到确切的问题，但是您发布的第一个代码片段的一个问题可能是

showSweetAlertLoader

返回一个 Promise，但您在调用之前没有等待它解决其他 jQuery 方法。所以像这样改变它：

  $("#optDuplicateCol").click(function(){
    
   if(verifyColumnSelection()){
    showSweetAlertLoader().then(() => {
         // 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();
    });
    
   }
  
  });