JS Error : [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience

Viewed 1906

When I click the button second time, then it shows the below warning:-

VM751 jquery-3.5.0.js:9987 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check 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

This is code:-


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();
    });
1 Answers

Synchronous requests block the thread. If you run it on the main thread, and the request takes a long time, the whole browser tab will freeze. Therefor, it is deprecated.

Best solution is to make the request async (which is the default). Other option is to open a worker thread with is much harder.

Related