在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); 
}