确保 ajax 函数在第二个非 ajax 函数触发之前完成答案

【问题标题】：Make sure ajax function finishes before 2nd non-ajax function fires确保 ajax 函数在第二个非 ajax 函数触发之前完成
【发布时间】：2020-02-01 06:59:17
【问题描述】：

与我刚才提出的问题类似，

如果我在 jQuery 中调用一个 ajax 函数，然后调用一个非 ajax 函数，我如何才能防止非 ajax 函数在第一个 ajax 回调函数完成之前触发。在第一个 ajax 函数中声明 async: false 就足够了吗？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

如果你在谈论这个：

$.ajax({...});
someFunction();

在 AJAX 调用完成之前，someFunction() 不会出现，那么您有三个选择：

进行 AJAX 调用 async: false。 不要这样做。这会使您的页面无响应；
将someFunction() 放入AJAX 调用的完成/成功/错误回调中。这是推荐的方法；或
使用插件管理请求队列，例如Ajax Queue。

AJAX 中的第一个 A 代表“异步”。您只需要习惯这些调用是异步的这一事实，并停止尝试在它们之上强制使用同步编程模型。适应新的编程模型。

【讨论】：

async: false 有什么不好？我以前用过，感觉还可以
因为当请求发生时，页面（如果您不使用 Chrome，则整个浏览器）将被锁定。如果这是 100 毫秒或更短的时间，它可能不会被注意到，但如果请求被延迟，则存在网络问题或服务器进程相当长时间运行，这将是一个大问题。
似乎链接回调函数也会导致浏览器锁定。有没有办法解决这个问题？

【解决方案2】：

jQuery AJAX 函数让您提供一个仅在请求完成后调用的回调。调用您的非 ajax 函数作为回调的一部分。

【讨论】：

【解决方案3】：

你可以像这样使用回调函数：

$("#btnSample").on("click", function (e) {

 $.ajax({
    url: 'some_url',
    type: "GET",
    async: true,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
      //call you second function here!
    }  
  }
});

});

【讨论】：