jQuery DataTables销毁重建时加载遮罩的事件选择问题

最近做项目碰到个烦人的问题：我用jQuery加载本地数据集，再通过DataTables渲染成表格。每次要根据特定参数更新表格时，流程是先执行$('#mytables').DataTable().destroy();销毁旧表格，清空tbody，循环插入新行，最后重新初始化DataTables。但这个操作偶尔会耗时1秒多，想加个loading遮罩提示用户，结果试了N多DataTables事件都踩坑了。

那些踩过的坑 #

• 一开始试了initComplete事件，结果遮罩在表格实际重绘完成之前就被隐藏了，用户根本看不到加载状态
• 其他DataTables内置事件要么触发时机不对，导致遮罩一直残留不消失；要么触发太快，遮罩闪一下就没了，等于没加

后来排查半天才发现，耗时的罪魁祸首不是表格重绘本身，而是页面里塞了个200kb的静态内容，拖慢了整个流程！

最终解决思路 #

把那部分大体积的静态内容改成AJAX异步加载，用AJAX的beforeSend和complete事件来精准控制遮罩的显示和隐藏：

// 先提前显示遮罩
$('#loading-mask').show();

$.ajax({
  url: '你的静态内容接口地址',
  type: 'GET',
  beforeSend: function() {
    // 确保遮罩在请求开始时显示
    $('#loading-mask').show();
  },
  success: function(data) {
    // 先把静态内容渲染到页面
    $('#static-content-wrap').html(data);
    
    // 接下来执行表格的销毁重建流程
    const table = $('#mytables').DataTable();
    table.destroy();
    $('#mytables tbody').empty();
    
    // 循环插入数据行
    yourLocalData.forEach(item => {
      $('#mytables tbody').append(`
        <tr>
          <td>${item.column1}</td>
          <td>${item.column2}</td>
          <!-- 其他列 -->
        </tr>
      `);
    });
    
    // 重新初始化DataTables
    $('#mytables').DataTable();
  },
  complete: function() {
    // 请求完成（不管成功失败），隐藏遮罩，加个淡入淡出更友好
    $('#loading-mask').fadeOut(300);
  }
});

后续说明 #

之前还尝试过用DataTables事件处理搜索、排序时的遮罩，没搞成，但现在把静态内容异步加载后，表格重绘速度快了不少，暂时不影响用户体验，就先放一放了。

内容的提问来源于stack exchange，提问作者lui