jQuery循环迭代中实时追加内容至元素的问题求助

问题根源 #

你代码里用了async: false的同步AJAX请求，这会完全阻塞浏览器的主线程——包括负责页面渲染的线程。虽然每次循环都执行了append操作，但浏览器被同步请求占满了资源，根本没时间去更新DOM，只能等整个do/while循环跑完后，才会一次性处理所有渲染任务，这就是页面要等全部完成才显示进度的原因。

解决方案：改用异步AJAX+递归（或Promise链） #

把同步请求改成异步，用递归的方式逐页处理，给浏览器留出渲染DOM的时间。

1. 改造AJAX函数为Promise风格

让get_page_of_products返回Promise，方便后续异步流程控制：

function get_page_of_products(pageToProcess) {
  return new Promise((resolve) => {
    jQuery.ajax({
      type: "POST",
      url: <?php echo json_encode(admin_url('admin-post.php')); ?>,
      data: "action=render_test&page=" + pageToProcess,
      dataType: 'json',
      // async默认就是true，可省略
      success: function(result) {
        resolve(result);
      }
    });
  });
}

2. 用async/await+递归实现逐页处理

用异步函数配合递归，每处理完一页就实时更新DOM，再继续下一页：

async function get_all_products(pageToProcess) {
  // 等待当前页请求完成
  const pageResult = await get_page_of_products(pageToProcess);
  const totalPages = pageResult.page_count;
  
  // 生成进度消息
  let updateMessage = `Page Processed = ${pageResult.page} of ${totalPages}.`;
  if (pageToProcess < totalPages) {
    updateMessage += ` Next page = ${pageResult.next_page}.`;
  }
  updateMessage += '<br />';
  
  // 实时更新控制台和页面DOM
  console.log(updateMessage);
  jQuery("#showResultsHere").append(updateMessage);
  
  // 递归处理下一页，直到所有页完成
  if (pageResult.next_page <= totalPages) {
    await get_all_products(pageResult.next_page);
  }
}

3. 调用方式不变

直接调用get_all_products(1)（假设从第1页开始）即可，现在页面会实时显示每一页的处理进度。

为什么之前移append到success没用？ #

哪怕把append放到同步AJAX的success回调里，同步请求还是会阻塞主线程——所有success回调都是在循环过程中同步执行的，但浏览器的渲染任务被排在了整个循环之后，DOM更新依然要等全部请求完成才会触发。只有改成异步请求，让主线程在两次请求之间有空隙处理渲染，才能实现实时更新。

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