JS 错误：[弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它对最终用户的体验不利答案

【问题标题】：JS Error : [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experienceJS 错误：[弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它对最终用户的体验不利
【发布时间】：2021-04-03 10:48:31
【问题描述】：

当我第二次单击该按钮时，它会显示以下警告：-

VM751 jquery-3.5.0.js:9987 [弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它对最终用户的体验产生不利影响。如需更多帮助，请查看https://xhr.spec.whatwg.org/.

send @ VM751 jquery-3.5.0.js:9987
ajax @ VM751 jquery-3.5.0.js:9682
jQuery._evalUrl @ VM751 jquery-3.5.0.js:9857
domManip @ VM751 jquery-3.5.0.js:6123
append @ VM751 jquery-3.5.0.js:6264
$.fn.add_title_section @ w2mm_cards.js:324
(anonymous) @ VM747 w2mm_cards.js:351
dispatch @ VM751 jquery-3.5.0.js:5429
elemData.handle @ VM751 jquery-3.5.0.js:5233

这是代码：-


var add_title_content = $(".add-title-content");
var mobile_section = $("#mobile-other-section");
$.fn.add_title_section = function () {
        // For desktop
        var first = $("#first-column");
        var second = $("#second-column");
        var third = $("#third-column");
        second.html("");
        second.show();
        add_title_content.show();
        second.append(add_title_content);
        first.removeClass();
        first.addClass("col-md-12 col-lg-4 round-content");
        third.removeClass();
        third.addClass("col-md-12 col-lg-4 round-content");
        
        $('.value-truncate').removeClass("truncated");
        $('.value-truncate').addClass("truncated-mobile");

        //For mobile
        var home_section = $(".mobile-home");
        home_section.hide();
        home_section.removeClass("hide-section");
        mobile_section.html("");
        mobile_section.append(add_title_content.clone(true));
        mobile_section.show();
        add_title_content.show();
    } 

     
    $(document).on("click", ".btn-add", function (e) {
        $.fn.add_title_section();
        e.stopImmediatePropagation();
    });

【问题讨论】：

看起来add_title_content 包含一个内联脚本，它进行同步AJAX 调用。您必须更改异步调用。当该脚本插入 DOM 时，它将成为“主线程”的一部分，尽管错误发生在单击按钮时。
相关：forum.jquery.com/topic/why-does-evalurl-use-async-false
@freedomn-m 一个很好的收获，它是 jQuery 在读取脚本时进行 AJAX 调用，错误不是由于add_title_content 中的 OP 代码（除了它添加了带有 src 的脚本） .
@JasmeetPabla 因为这似乎是一个 jQuery 问题，我不能说太多。一种方法是从add_title_content 中删除脚本标记，并将脚本包含到原始标记中。这可能需要对这些脚本进行一些更改，但这取决于它们在页面上所做的事情。另一种方法是动态添加脚本标签，但在不知道代码的情况下，所有修复都只是推测。您可以编辑您的帖子，并添加 add_title_content 字符串。
第一次在add_title_content中可能没有脚本标签。从字符串创建 HTML 总是容易出错，真正的动态元素创建也可以解决这个问题。

标签： javascript jquery

【解决方案1】：

同步请求阻塞线程。如果您在主线程上运行它，并且请求需要很长时间，则整个浏览器选项卡将冻结。因此，它已被弃用。

最好的解决方案是使请求异步（这是默认设置）。其他选择是打开一个工作线程要困难得多。

【讨论】：

Rani Sharmin 我应该用代码做什么，你能告诉我吗？
没有看到你的代码的其余部分。