How to speed up an alert, Javascript

Question

I have created my own add to cart button and when the user clicks the button it pops up an alert saying that the product was added to cart. I have three categories of products and have created a click event handler (pop-up alert) for each one. The problem I am seeing is that when the user adds a product to cart, the alert is very slow to pop up. It usually takes 10-20 seconds. Is there something I am doing wrong?

<div  class="productinfo">
  <div class="producttitle"><?php echo $specialty1->Specialty1 ?></div>
  <div class="buybutton">
    <?php $producturl = ProductURL::find(array('Product'=>$specialty1->Specialty1));
    if($producturl[0]->URL!=NULL){
        echo '<span id="add"><a id="add-link" href="' . $producturl[0]->URL . '" data-role="button" data-inline="true" data-mini="true" data-theme="d" target="vspage" onclick="' . "_gaq.push(['_trackEvent', 'Buy Now', 'Specialty', '" . $specialty1->Specialty1 . "'" . "]); _gaq.push(['_link', '" . $producturl[0]->URL . "']);" . '">';
        if($producturl[0]->Button!=NULL){
            echo $producturl[0]->Button . '</a></span>';
        }else {
            echo 'Add To Cart</a>';
        }
    }
    if($producturl[0]->URL2!=NULL){
        echo '<span id="add"><a id="add2-link" href="' . $producturl[0]->URL2 . '" data-role="button" data-inline="true" data-mini="true" data-theme="d" target="vspage" onclick="' . "_gaq.push(['_trackEvent', 'Buy Now', 'Specialty', '" . $specialty1->Specialty1 . "'" . "]); _gaq.push(['_link', '" . $producturl[0]->URL2 . "']);" . '">';
        if($producturl[0]->Button2!=NULL){
            echo $producturl[0]->Button2 . '</a></span>';
        }else {
            echo 'Add To Cart</a>';
        }
    }
    if($producturl[0]->URL3!=NULL){
        echo '<span id="add"><a id="add3-link" href="' . $producturl[0]->URL3 . '" data-role="button" data-inline="true" data-mini="true" data-theme="d" target="vspage" onclick="' . "_gaq.push(['_trackEvent', 'Buy Now', 'Specialty', '" . $specialty1->Specialty1 . "'" . "]); _gaq.push(['_link', '" . $producturl[0]->URL3 . "']);" . '">';
        if($producturl[0]->Button3!=NULL){
            echo $producturl[0]->Button3 . '</a></span>';
        }else {
            echo 'Add To Cart</a>';
        }
    }
    ?></div>
    <script type="text/javascript">

 $(document).ready(function(){
 $('a#add-link').click(function(event) { 
 event.preventDefault(); 
 var url = $(this).attr("href");
 $.post(url, function () {
alert("You added this product to your cart.");
});
});
$('a#add2-link').click(function(event) { 
event.preventDefault(); 
var url = $(this).attr("href");
$.post(url, function () {
alert("You added this product to your cart.");
});
});
$('a#add3-link').click(function(event) { 
event.preventDefault(); 
var url = $(this).attr("href");
$.post(url, function () {
alert("You added this product to your cart.");
});
});
});
</script>

Answer 1

The reason this is happening is because you are sending a request to a URL that takes a while to respond. You'll need to optimize the endpoints that you are requesting in order to make that alert show up faster - and even then you're still limited by the user's connection speed.

Answer 2

The alert takes so long to appear because your server-side handling takes so long. Since this is about a shopping cart, this is a major issue: waiting 10-20 seconds online for a shopping cart to fill is a horrible user experience. Ideally, this should only take 1 second at most.

Aside from that, I'd strongly advise you NOT to use an alert for this. an alert is something really intrusive and interrupts the user's workflow. it also halts Javascript execution, slowing down the page further.

What I'd suggest:

1. Speed up the shopping cart server-side code enormously. Ideally, the only thing that needs to be done is adding the item code of the item your user is buying to an array in their session.

2. Ditch the alert from your workflow. Either do a HTML-style popup beneath your shopping cart to indicate that something happened, or show a short animation of an item being added to the shopping cart. Do something that is fast, but doesn't interrupt the user.

3. While you're at it, refactor your code: you have 2 times 3 code snippets, two for each button, that have 3 times the same code with 1 or 2 characters difference. that's not scalable and a maintenance hell.