jQuery回调函数未按预期顺序执行的问题排查与咨询

为什么第一个代码不符合预期？ #

咱们先拆解下你第一个代码的问题——核心在于**$.getJSON是异步操作**，它不会停下来等服务器返回数据，而是发起请求后直接往下执行后续代码，等服务器响应完成了才会回头执行它内部的回调函数。

看这段代码：

(function(callback) { 
  let found = false; 
  $.getJSON("people.json", function(data) { 
    $.each(data.people, function() { 
      if (this.number === $('#number').text()) { 
        console.log("yes"); 
        found = true; 
      } 
    }); 
  }); 
  callback(found); // 这里会立刻执行！因为$.getJSON还在和服务器通信呢
})(function(found) { 
  if (found == false) { 
    console.log("no"); 
  } 
});

当你调用callback(found)的时候，found还是初始的false，所以先输出了"no"；等请求完成、数据处理完，才会输出"yes"，这就导致了顺序颠倒的情况。

关于JS同步/异步的疑问解答 #

JavaScript是单线程语言，但它靠异步任务队列来处理耗时操作（比如网络请求、定时器、DOM事件），这里给你捋清楚两种执行场景：

• 同步执行：普通变量声明、循环、非异步函数调用（比如console.log、自定义的普通函数）都是同步的，代码会从上到下依次执行，前一个任务做完才会走下一个。
• 异步执行：像$.getJSON、setTimeout、AJAX这类操作，会被放到异步队列里，等主线程的所有同步任务都执行完，才会按顺序跑这些异步任务的回调。

简单说：如果你的代码依赖某个异步操作的结果，那必须把逻辑写在这个异步操作的回调里，不然就会出现“结果还没出来，代码先执行了”的问题。

第二个代码为什么能正常工作？ #

你第二个代码把判断found的逻辑放到了$.getJSON的回调函数内部，这就保证了只有当请求完成、数据处理完毕后，才会执行判断逻辑：

let found = false; 
$.getJSON("people.json", function(data) { 
  $.each(data.people, function() { 
    if (this.number === $('#addFriendScreen > p').eq(0).text()) { 
      found = true; 
      console.log("true"); 
    } 
  }); 
  if (found === false) { 
    console.log("false"); 
  } 
});

这样就不会出现顺序混乱的问题，因为所有依赖异步请求结果的代码，都乖乖等请求完成后才执行。

另外，如果你觉得嵌套回调不够清爽，也可以用Promise或者async/await来改写（jQuery的$.getJSON本身就返回Promise对象），比如：

async function checkNumber() {
  let found = false;
  const data = await $.getJSON("people.json");
  $.each(data.people, function() {
    if (this.number === $('#addFriendScreen > p').eq(0).text()) {
      found = true;
      console.log("true");
    }
  });
  if (!found) {
    console.log("false");
  }
}
checkNumber();

这样代码的逻辑顺序更直观，可读性也更好。

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