如何在AJAX返回的3万条数据渲染完成后调用指定函数？

嘿，我完全懂你现在的困扰——3万条记录一次性塞进DOM里，浏览器直接卡5秒，还导致你的后续函数提前跑了，根本没等数据处理渲染完。咱们来一步步搞定这个问题：

核心问题分析 #

你遇到的本质问题是：$('#order').html(data) 是同步完成DOM节点插入的，但浏览器的实际渲染（把节点画到页面上）是异步的。你的data.done回调是在AJAX请求完成后立刻触发的，这时候虽然DOM结构已经更新，但浏览器还在后台忙着渲染这3万条记录，导致你的后续函数拿到的是未完全渲染的状态，自然没法正常执行。

解决方案1：用requestAnimationFrame等待渲染完成 #

如果必须一次性插入所有数据，那可以用浏览器提供的requestAnimationFrame API，它会确保你的代码在浏览器下一次重绘完成后再执行，完美避开渲染卡顿的等待期：

// 先完成DOM插入
$('#order').html(data);

// 等待浏览器渲染完成后再执行你的函数
requestAnimationFrame(() => {
  yourPostProcessingFunction(); // 这里放你要延迟执行的函数
});

这个方法简单直接，适合不想改动太多现有代码的场景。

解决方案2：分批插入DOM，彻底解决卡顿问题 #

3万条记录一次性插入本来就不是最优做法，浏览器处理这么多节点肯定会卡顿。更好的方式是分片分批插入，给浏览器留足渲染时间，同时还能精准控制回调时机：

// 假设你的data是<li>...</li>格式的列表（可根据实际结构调整拆分逻辑）
const itemSegments = data.split('</li>').filter(segment => segment.trim() !== '');
const chunkSize = 500; // 每次插入500条，可根据浏览器性能调整
let currentChunkIndex = 0;

function insertNextChunk() {
  if (currentChunkIndex >= itemSegments.length) {
    // 所有分片插入完成，执行后续函数
    yourPostProcessingFunction();
    return;
  }

  // 截取当前要插入的分片
  const currentChunk = itemSegments.slice(currentChunkIndex, currentChunkIndex + chunkSize)
    .map(segment => segment + '</li>')
    .join('');

  // 插入到容器中
  $('#order').append(currentChunk);

  currentChunkIndex += chunkSize;
  // 让浏览器先渲染当前分片，再继续下一批
  requestAnimationFrame(insertNextChunk);
}

// 先清空容器，再开始分批插入
$('#order').empty();
insertNextChunk();

这个方法不仅解决了回调时机问题，还彻底消除了浏览器卡顿的现象，用户体验会好很多。

额外提醒 #

如果你的data.done是绑定在AJAX请求的回调上，记得要把DOM插入和后续逻辑都放在同一个done回调里，确保顺序正确：

$.get('/your-data-url')
  .done(data => {
    // 先处理DOM插入（不管是一次性还是分批）
    $('#order').html(data);
    // 再用requestAnimationFrame等待渲染完成
    requestAnimationFrame(() => {
      yourPostProcessingFunction();
    });
  });

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