jQuery.ajax() 方法的异步选项已弃用，现在怎么办？

Posted 2023-03-31

【中文标题】jQuery.ajax() 方法的异步选项已弃用，现在怎么办？

【英文标题】：jQuery.ajax() method's async option deprecated, what now?

【发布时间】：2012-07-12 08:40:07

【问题描述】：

从 jQuery 1.8 开始，在 jQuery.ajax() 中使用 async:false 已弃用。 但是，在后台正在进行 AJAX 通信的情况下，您见过多少带有“加载屏幕”的网页？我可能见过成千上万的人。

我的情况是我正在编写一个需要加载语言文件的移动应用程序。在开始时，我加载语言文件并从语言文件中检索按钮的文本和其他 GUI 元素。

这对我来说真的很糟糕。因为如果缺少语言文件，则不应出现 GUI。那么我该如何解决呢？将我所有的代码放在success 回调中？对我来说，这似乎不是一个好的编码实践。我可以用其他方法解决吗？

【问题讨论】：

您可以制作新功能。并在 onSuccess 处理程序中调用这些函数。它仍然可以这样查看

@ChenKinnrot async=false is `sync ;)

我读了几遍才点击它。一开始我的反应是“嗯？”然后我就像“ermahgerd！”

【参考方案1】：

解决方法是手动添加一个覆盖层，防止用户与界面交互，然后在 AJAX 查询完成后将其移除。

$(function() 
    show_overlay();        

    $.ajax(
        // Query to server
    ).done(function() 
        // Verify good data
        // Do stuff
        remove_overlay();
    );
);

【讨论】：

您能解释一下我应该如何手动添加和删除该叠加层吗？ show_overlay() 不是函数。对不起，如果这个问题太菜鸟，但我是新手。

@RobertoSepúlvedaBravo 这只是一个例子。 show_overlay() 是一个假设函数，它显示一个隐藏界面的元素，例如一个 div，它用高 z-index 填充视口并包含一些内容。

好的，请您澄清一下。我正在尝试处理 Jquery ContextMenu 插件，根据 ajax 响应生成 contextmenu 子项，因此我无法将您的解决方案应用于此。

如果需要阻止 ui 的函数是一个 ajax 调用，例如从服务器抓取 html 并使用 $().html(data) 加载它呢？

您可以向 body 元素添加一个“不可触摸”类，而不是覆盖，例如body.untouchable *pointer-events:none !important; cursor: wait !important;.

【参考方案2】：

我在工单中阅读了关于弃用此参数的official discussion，这是我的理解：

问题在于，为同步 AJAX 实现 Promises (1) 会给它们带来开销。

在现实世界中有大量同步 AJAX 的用例，例如在页面卸载之前保留状态。因此，此功能将保留，但您使用它的方式可能会改变。

当async 是false 时，最接近的解决方案（登陆1.8？）是只支持回调（但不支持Promises）。

总结：如果需要，请继续使用async: false，但要注意它的缺点（阻塞虚拟机）。不用担心，如果此功能从 $.ajax() 中删除，您将获得替代方案。

【讨论】：

“在页面卸载前保留状态”是什么意思？我想不出同步 AJAX 有什么好的用途。

@user2867288，页面卸载是一个事件，当用户尝试关闭浏览器选项卡/窗口时发生。 “保持状态”可能意味着很多事情：自动保存表单数据，告诉服务器用户交互已经完成，提交一些分析数据（例如用户在页面上花费了多少时间）。这确实有一个用例 - 这就是创建 Beacon API 的原因。当它具有适当的跨浏览器支持时，就不需要同步 AJAX。

【参考方案3】：

我敢打赌，这 1000 个页面中的 许多 在等待 AJAX 调用时实际上并没有阻塞 UI。相反，它们可能会在调用时用等待屏幕遮挡 UI，然后在响应处理程序上将其删除。

有很多方法可以隐藏 UI（您甚至可以使用设置为 Modal 且没有转义或关闭按钮的 jQuery UI 对话框），所以我将由您决定。但是代码的布局是这样的：

var someFunction = function () 

    // any pre-conditions to the logic
    // obscure the UI here

    $.ajax(
        url: 'ajax/test.html',
        success: function(data) 

            // handle the response
            // show the UI again

        ,
        error: function(data) 

            // handle the response
            // show the UI again

        
    ); 

我确信有多种方法可以实现该事件顺序，但这是大体思路。阻止 UI 从来都不是真正的意图，我想 jQuery 决定 包含 这个功能比 删除 它更难。它是异步的。

【讨论】：

但是如果你真的想阻止 UI 使用 blockUI 插件：jquery.malsup.com/block

@Simon：当然，如果你真的想要的话。但不建议这样做，而且通常情况下，这表明人们需要重新考虑自己的方法。可能有例外，虽然我现在想不出来。

【参考方案4】：

为什么要使用 ajax 来获取这个文件？只需使用 script 标记将其包含在内。

在任何情况下，您都不会将所有代码都放在 onSuccess 中 - 而是从那里调用一个函数来启动您的代码运行。

【讨论】：

想象在某些情况下您需要通过 ajax 获取数据，这个问题仍然值得尊敬。