JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<button id="AddToCart">Add To Cart</button>
<div id="CartContainer">Cart Container</div>

CSS

#CartContainer {
    border: 1px solid #ddd;
    margin-top: 20px;
    padding: 50px 50px;
    text-align: center;
}

JavaScript

//var myVar = null;

    jQuery('body').on('click', '#AddToCart', function (evt, cart) {
        //timber.RightDrawer.open();
        doDelayedClear();
        $('#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);
    }