我有一个脚本，使一个模式出现时，一个按钮被点击。有什么办法来改进它，使模态出现得更快吗？

Question

该模式包含文本“添加到购物车”，并显示在单击任何添加到购物车按钮。我没有写这个脚本，我对JS知之甚少，但我希望能提高模态外观的速度。在单击按钮后，该模式需要2-6秒才能出现，我想知道这是否是由于我在这个脚本中可以控制的任何东西。在我看来，脚本加载的内容不多(模式只是文本和容器)，所以我猜测延迟是由动画设置或脚本控制之外的其他因素造成的。有人能告诉我我的想法是否正确吗？

<script>
        window.addEventListener('load', function (event) {
                        $(window).scroll(function(){
  var numPix = 200;
  var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / numPix;
    if( op <= 0 ){
        $("#sticky").hide();
    } else {
        $("#sticky").show();
    }
    $("#sticky").css("opacity", op ); 
});
            $(".addToCart").removeClass("addToCartHide");
            $('.addToCart').click(function(){
                var skuUrl = "/transaction/addtocartbysku?sku=" + $(this).attr("data-id") + "&quantity=1";
                var xhttp = new XMLHttpRequest();
                xhttp.open("POST", skuUrl, false);
                xhttp.send();
                $("#snackbar").animate( {"opacity": "1"}, 1000, "swing" );
                setTimeout(function() {
                    $("#snackbar").animate( {"opacity": "0"}, 1000, "swing" );
                }, 3000);
            });
        });
    </script>

Answer 1

@epascarello找到了正确答案。由于动画是在同步ajax调用之后出现的，所以该模式出现得很慢。更新后的代码以更正顺序并使ajax调用异步：

<script>
        window.addEventListener('load', function (event) {
                        $(window).scroll(function(){
  var numPix = 200;
  var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / numPix;
    if( op <= 0 ){
        $("#sticky").hide();
    } else {
        $("#sticky").show();
    }
    $("#sticky").css("opacity", op ); 
});
            $(".addToCart").removeClass("addToCartHide");
            $('.addToCart').click(function(){
                var skuUrl = "/transaction/addtocartbysku?sku=" + $(this).attr("data-id") + "&quantity=1";
                var xhttp = new XMLHttpRequest();
                $("#snackbar").animate( {"opacity": "1"}, 1000, "swing" );
                setTimeout(function() {
                    $("#snackbar").animate( {"opacity": "0"}, 1000, "swing" );
                }, 3000);
                xhttp.open("POST", skuUrl, true);
                xhttp.send();
            });
        });
    </script>