在Ajax Quick Cart懸停時暫停setInterval，並在沒有時恢復？

Question

我想設置我的Ajax快速購物車，以便如果用戶在快速購物車上徘徊（換句話說與它互動），它會延遲我設置的setInterval，以便一旦某件物品已關閉3秒後添加。

我不是那麼棒，所以任何幫助將不勝感激！

這是我的原代碼：

{% comment %} 
Ajaxify your cart with this plugin. 
Documentation: 
    - http://shopify.com/timber#ajax-cart 
{% endcomment %} 
{% if settings.ajax_cart_enable %} 
    {{ 'handlebars.min.js' | asset_url | script_tag }} 
    {% include 'ajax-cart-template' %} 
    {{ 'ajax-cart.js' | asset_url | script_tag }} 
    <script> 
    jQuery(function($) { 
     ajaxCart.init({ 
     formSelector: '#AddToCartForm', 
     cartContainer: '#CartContainer', 
     addToCartSelector: '#AddToCart', 
     cartCountSelector: '#CartCount', 
     cartCostSelector: '#CartCost', 
     moneyFormat: {{ shop.money_format | json }} 
     }); 
    }); 

    jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) { 
     // Bind to 'ajaxCart.afterCartLoad' to run any javascript after the cart has loaded in the DOM 

     timber.RightDrawer.open(); 
    }); 

    jQuery('body').on('click','#AddToCart', function(evt, cart) { 

      timber.RightDrawer.open(); 

       var myVar = setInterval(function(){ 
       timber.RightDrawer.close(); 
       clearInterval(myVar); 
       }, 3000); 
    }); 

這是原來的代碼，我努力去適應設法得到它的工作，但仍然沒有運氣，它只是打破我的setInterval的一部分：

jQuery('body').on('click','#AddToCart', function(evt, cart) { 

      timber.RightDrawer.open(); 

       $('#CartContainer').hover(function(ev){ 
        clearInterval(myVar); 
       }, function(ev){ 
        myVar = setInterval(function(){ 
        timber.RightDrawer.close(); 
        clearInterval(myVar); 
        }, 3000); 
       }); 
     }); 

Answer 1

我不認爲這是一種好的方法，正如其他人所評論的那樣，有一些潛在的問題需要您按照自己的方式進行操作。

但是，要回答這個問題，下面的JavaScript看起來像描述的那樣工作。它看起來像你的主要問題是你沒有設置點擊按鈕後的時間間隔，只有在懸停和取消懸停容器後點擊按鈕後才設置。

下面，我已將延遲清除移至其自己的功能（doDelayedClear()）以防止重複代碼，並且當單擊該按鈕時以及當鼠標懸停並取消懸停時，我都會調用doDelayedClear()。

我還添加了一些電話console.log()，以便您可以觀看正在發生的事情。

演示：http://jsfiddle.net/BenjaminRay/nb9tetLs/

的JavaScript：

var myVar = null; 

jQuery('body').on('click', '#AddToCart', function (evt, cart) { 
    timber.RightDrawer.open(); 
    doDelayedClear(); 
    jQuery('#CartContainer').hover(function (ev) { 
     console.log('hovering...'); 
     clearInterval(myVar); 
    }, function (ev) { 
     console.log('not hovering...'); 
     doDelayedClear(); 
    }); 
}); 

function doDelayedClear() { 
    myVar = setInterval(function() { 
     timber.RightDrawer.close(); 
     console.log('Set interval executed!'); 
     clearInterval(myVar); 
    }, 3000); 
}