Skip to content
Advertisement

I have a script that makes a modal appear when a button is clicked. Is there a way to improve it so that the modal appears more quickly?

The modal contains the text “Added to Cart”, and it appears after clicking any Add to Cart Button. I didn’t write this script, and I know very little JS, but I was hoping to improve the speed of the modal appearance. It takes 2-6 seconds for the modal to appear after clicking the button, and I want to know if this is due to anything that I can control in this script. It appears to me that there isn’t much for the script to load (the modal is just text and a container), so my guess is that the delay is being caused either by the animation settings or something else beyond what this script controls. Can anyone tell me if I’m on the right track in this thinking?

<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>

Advertisement

Answer

@epascarello found the correct answer. The modal was slow to appear because the animation was after a synchronous ajax call. Updated code to correct the order and make the ajax call asynchronous:

<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>
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement