Hover delay for mousing on and off and element.

hoverIntent.js

/**
 * Adds a delay to a hovered element
 * @param {DOMElement} el 
 * @param {Object} opts
 * opts = {
        onHover: {Function},
        offHover: {Function},
        onDelay: {Integer},
        offDelay: {Integer},
        hoverTarget: {DOMElement}
    }
 */

function hoverIntent(el, opts) {
    
    var onHover = opts.onHover || function() {};
    var offHover = opts.offHover || function() {};
    var onDelay = opts.onDelay || 500;
    var offDelay = opts.offDelay || 500;
    var hoverTarget = opts.hoverTarget || null;
    
    var ontimer = null;
    var offtimer = null;
    var targetHovered = false;
    
    el.addEventListener('mouseenter', function() {
        clearTimeout(offtimer);
        ontimer = setTimeout(function() {
            if(offtimer) return;
            onHover();
        }, onDelay);
    });
    el.addEventListener('mouseleave', function() {
        clearTimeout(ontimer);
        onMouseOut()
    });

    if(hoverTarget) {
        hoverTarget.addEventListener("mouseenter", function() {
            targetHovered = true;
        })
        hoverTarget.addEventListener("mouseleave", function() {
            targetHovered = false;
            onMouseOut()            
        })
    }

    function onMouseOut() {
        offtimer = setTimeout(function() {
            if(targetHovered) return;
            offHover();
            offtimer = null;
        }, offDelay);
    }
}