异步函数执行顺序异常：如何确保DOM操作按预期顺序执行？

首先得指出你原来代码的核心问题：你把firstfunction()放在了$.ajax的url参数里，这完全是逻辑错误——url需要的是请求地址字符串，但firstfunction()是用来执行加载JSON和创建DOM的异步操作的，它根本不会返回有效的URL，而且这个函数内部的异步请求和你外层的$.ajax没有任何关联，所以外层的success回调自然不会等firstfunction完成，这就是为什么后续操作会提前执行。

要解决这个问题，关键是要正确等待firstfunction()内部的异步操作完成，下面分两种场景给出具体方案：

场景1：可以修改firstfunction()的代码 #

最优雅的方式是让firstfunction()返回一个Promise，这样就能用链式调用的方式等待它完成：

修改后的firstfunction() #

function firstfunction() {
  // 返回jQuery的AJAX Promise对象
  return $.getJSON('/你的JSON接口地址').then(function(data) {
    // 这里是原来的创建div并显示数据的逻辑
    const newDiv = document.createElement('div');
    newDiv.textContent = JSON.stringify(data);
    // 假设你原来把这个div加到了某个容器里，比如body
    document.body.appendChild(newDiv);
    
    // 可选：如果后续操作需要用到data，可以返回它
    return data;
  });
}

调用方式 #

// 等待firstfunction完成后执行后续操作
firstfunction().then(function() {
  parent.appendChild(x);
});

如果你习惯用async/await，也可以这么写：

async function handleOperations() {
  await firstfunction();
  parent.appendChild(x);
}

handleOperations();

场景2：无法修改firstfunction()的代码 #

如果不能改这个函数，那可以给它加一个回调参数，让它在内部异步操作完成后触发回调：

修改后的firstfunction()（新增回调参数） #

function firstfunction(callback) {
  // 原来的加载JSON逻辑
  $.getJSON('/你的JSON接口地址', function(data) {
    const newDiv = document.createElement('div');
    newDiv.textContent = JSON.stringify(data);
    document.body.appendChild(newDiv);
    
    // 异步操作完成后，调用传入的回调
    if (typeof callback === 'function') {
      callback();
    }
  });
}

调用方式 #

// 把后续操作放在回调里
firstfunction(function() {
  parent.appendChild(x);
});

核心原理 #

JavaScript中的异步操作（比如AJAX请求）不会阻塞代码执行，如果你不通过Promise、回调或者async/await来明确等待，后续代码会直接跳过异步操作先执行——这就是你遇到“后续操作先于DOM显示完成”的根本原因。只要确保后续操作是在异步操作的完成回调（或Promise的then）里执行，就能保证顺序正确。

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