如何让JavaScript函数等待另一个函数执行完成后再运行？

当前执行顺序不符合预期的核心原因是getCounterValue没有返回Promise/延迟对象，外层$.when()接收到的返回值为undefined，会直接判定任务完成，不等computeCounterValue内部的异步定时器逻辑执行完毕，就触发了外层的done回调。

通过给异步逻辑绑定延迟对象状态监听即可实现预期打印顺序，修改后代码如下：

$(function() {
  var focusOutEvent = function() {
    $.when(
      getCounterValue()
    ).done(function() {
      console.log('catchValidateButtonClick');
    });
  }

  var getCounterValue = function() {
    // 创建jQuery延迟对象用于标记异步任务状态
    const dfd = $.Deferred();
    $.when(
      console.log('updateCacheData')
    ).done(function() {
      computeCounterValue(function() {
        console.log('counterValueComputation done');
        // 异步逻辑执行完毕，标记延迟对象为已完成
        dfd.resolve();
      });
    });
    // 返回延迟对象的promise实例供外层监听
    return dfd.promise();
  }

  var computeCounterValue = function(callback) {
    setTimeout(function() {
      callback();
    }, 3000);
  }

  focusOutEvent();
});

• 仅需要调整getCounterValue的逻辑，新增延迟对象监听异步任务的完成状态
• 外层$.when会等待getCounterValue返回的promise变为完成状态后，再执行done回调内的打印逻辑
• 最终打印顺序为：updateCacheData → counterValueComputation done → catchValidateButtonClick，符合预期要求。

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