Question

我创建了自己的add to cart按钮，当用户点击按钮时，会弹出一条提示，说明产品已添加到购物车中。我有三类产品，并为每个产品创建了一个点击事件处理程序（弹出警报）。我看到的问题是，当用户将产品添加到购物车时，弹出警报的速度非常慢。通常需要10-20秒。有什么我做错了吗？

<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

发生这种情况的原因是因为您向URL发送请求需要一段时间才能响应。您需要优化所请求的端点，以便更快地显示该警报 - 即使这样，您仍然受到用户连接速度的限制。

Answer 2

警报需要很长时间才能显示，因为服务器端处理需要很长时间。由于这是一个购物车，这是一个主要问题：在线等待10-20秒购物车填充是一种可怕的用户体验。理想情况下，这最多只需要1秒钟。

除此之外，我强烈建议你不要使用此警报。警报是非常侵入性的，会中断用户的工作流程。它还会停止执行Javascript，从而进一步降低页面速度。

我建议：

极大地加快购物车服务器端代码的速度。理想情况下，唯一需要做的就是将用户购买的商品的商品代码添加到会话中的数组中。
从您的工作流程中删除警报。您可以在购物车下方添加HTML样式的弹出窗口，以指示发生的事情，或者显示正在添加到购物车中的项目的简短动画。做一些快速但不会打断用户的事情。
当你在它的时候，重构你的代码：你有2次3个代码片段，每个按钮有两个代码片段，它们有相同代码的3倍，差异为1或2个字符。那是不可扩展的，维护地狱。

如何加快提醒，Javascript

2 个答案: