Question

我正在尝试设置我的Ajax快速购物车，这样如果用户将鼠标悬停在快速购物车上（换句话说就是与它进行交互），它会延迟我设置的setInterval，以便在有东西时关闭购物车3秒后添加。

我对JS不是那么好，所以任何帮助都会受到赞赏！

这是我的原始代码：

{% 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似乎按照描述工作。您的主要问题似乎是您没有在点击按钮后设置时间间隔;它只是在悬停和取消悬停容器后单击按钮AND后才设置。

下面，我已将延迟清除移动到其自己的功能（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);
}

在Ajax快速购物车悬停时暂停setInterval，何时不恢复？

1 个答案: