Add a timer to close Ajax Quick Cart (Shopify) after product is added to cart?

Question

I've successfully set up the Shopify Ajax Cart using the Timber framework so currently my cart closes if you click anywhere outside of the cart (or using the close button).

I want to be able to create a timer so that after a product has been added to the cart and the ajax quick cart opens it then closes after say 5 seconds so the user can continue to shop. If they want to view the cart for longer they can hit the cart button to reopen and from there click the link to the full cart page.

It was suggested to me that I can close the cart with timber.RightDrawer.close(); and I should set it up in a listener like the one below however being new to JS I'm struggling with where to begin.

jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
    // start timer function

    // when timer is triggered:
    timber.rightDrawer.close();
});

I've tried the following but I'm really just guessing...

jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
    // start timer function
    $('#AddToCart').on('click', function(){
        setTimeout(function(){
        // when timer is triggered:
        timber.rightDrawer.close();
        },500);
    });
});

Some of my current code as follows, see Timber framework for same setup as mine:

theme.liquid 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();
});
</script>
{% endif %}

timber.js.liquid:

timber.drawersInit = function () {
   timber.LeftDrawer = new timber.Drawers('NavDrawer', 'left');
   timber.RightDrawer = new timber.Drawers('CartDrawer', 'right',
   'onDrawerOpen': ajaxCart.load
   });
};

timber.Drawers = (function () {
  var Drawer = function (id, position, options) {
  var defaults = {
  close: '.js-drawer-close',
  open: '.js-drawer-open-' + position,
  openClass: 'js-drawer-open',
  dirOpenClass: 'js-drawer-open-' + position
};

this.$nodes = {
  parent: $('body, html'),
  page: $('#PageContainer'),
  moved: $('.is-moved-by-drawer')
};

this.config = $.extend(defaults, options);
this.position = position;

this.$drawer = $('#' + id);

if (!this.$drawer.length) {
  return false;
}

this.drawerIsOpen = false;
this.init();
  };

 Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};

  Drawer.prototype.open = function (evt) {
// Keep track if drawer was opened from a click, or called by another function
var externalCall = false;

// Prevent following href if link is clicked
if (evt) {
  evt.preventDefault();
} else {
  externalCall = true;
}

// Without this, the drawer opens, the click event bubbles up to $nodes.page
// which closes the drawer.
if (evt && evt.stopPropagation) {
  evt.stopPropagation();
  // save the source of the click, we'll focus to this on close
  this.$activeSource = $(evt.currentTarget);
}

if (this.drawerIsOpen && !externalCall) {
  return this.close();
}

// Add is-transitioning class to moved elements on open so drawer can have
// transition for close animation
this.$nodes.moved.addClass('is-transitioning');
this.$drawer.prepareTransition();

this.$nodes.parent.addClass(this.config.openClass + ' ' + this.config.dirOpenClass);
this.drawerIsOpen = true;

// Run function when draw opens if set
if (this.config.onDrawerOpen && typeof(this.config.onDrawerOpen) == 'function') {
  if (!externalCall) {
    this.config.onDrawerOpen();
  }
}

if (this.$activeSource && this.$activeSource.attr('aria-expanded')) {
  this.$activeSource.attr('aria-expanded', 'true');
}

// Lock scrolling on mobile
this.$nodes.page.on('touchmove.drawer', function () {
  return false;
});

this.$nodes.page.on('click.drawer', $.proxy(function () {
  this.close();
  return false;
}, this));
  };

  Drawer.prototype.close = function () {
if (!this.drawerIsOpen) { // don't close a closed drawer
  return;
}

// deselect any focused form elements
$(document.activeElement).trigger('blur');

// Ensure closing transition is applied to moved elements, like the nav
this.$nodes.moved.prepareTransition({ disableExisting: true });
this.$drawer.prepareTransition({ disableExisting: true });

this.$nodes.parent.removeClass(this.config.dirOpenClass + ' ' + this.config.openClass);

this.drawerIsOpen = false;

this.$nodes.page.off('.drawer');
  };

  return Drawer;
})();

// Initialize Timber's JS on docready
$(timber.init);

Answer 1

Use setinterval to set the time to 5s

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

  timber.RightDrawer.open();

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