Timeout Function to Prevent too many click animations

Question

I have the below slide-in menu code I put together from scratch. I'm trying to add a timeout function to prevent too many slide-ins and slide-outs due to multiple clicking. Only one click per 200ms should actually trigger the animation. I tried and tried but could not figure this out. Help! :)

var togglerWidth = $('#mobile-menu-toggler').css('min-width');     
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
    $('#mobile-menu-toggler').animate({      
        width: menuWidth
    },
    500,
    'swing',
    function () {
    });

    $('#mainmenu-mobile').animate({
        right: "0px"
    }, 
    500,
    'swing',
    function () {
    });
}

var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width();
    $('#mobile-menu-toggler').animate({
        width: togglerWidth
    },
    500,
    'swing',
    function () { 
    });

    $('#mainmenu-mobile').animate({
        right: -menuWidth
    },
    500,
    'swing',
    function () {
    });
}

var activate = function () {
    $('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}

var deactivate = function () {
    $('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$("#mobile-menu-toggler").click(function () {
    $(this).toggleClass('inactive-menu');
    $('#mainmenu-mobile').toggleClass('inactive-menu');
    if ($(this).hasClass('inactive-menu')) {
        slideRight();
        deactivate();
    } else {
        slideLeft();
        activate();
    }
});
    $(document).mousedown(function (e) {
    var container = $("#mobile-menu-wrap");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        slideRight();
        deactivate();
    }
});

FIDDLE: http://jsfiddle.net/Lam9rwLg/2/

Answer 1

Use This Code. Timer is set for 2 seconds. Change as per required.

//Mobile Menu Animation

var togglerWidth = $('#mobile-menu-toggler').css('min-width'); //get width of toggler

//Slide left function
var slideLeft = function () {
    var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
    $('#mobile-menu-toggler').animate({
        width: menuWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback    
    });

    $('#mainmenu-mobile').animate({
        right: "0px"
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback 
    });
}

//Slide Right Function
var slideRight = function () {
    var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
    $('#mobile-menu-toggler').animate({
        width: togglerWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback    
    });

    $('#mainmenu-mobile').animate({
        right: -menuWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback     
    });
}

var activate = function () { //switch to 'active-menu' class
    $('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}

var deactivate = function () { //switch back to 'inactive-menu' class
    $('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}

$("#mobile-menu-toggler").click(function () {
     $("#mobile-menu-toggler").unbind('click');
    $(this).toggleClass('inactive-menu');
    $('#mainmenu-mobile').toggleClass('inactive-menu');
    $("#mobile-menu-wrap").prop("disabled",true);
    if ($(this).hasClass('inactive-menu')) {
        slideRight();
        deactivate();
    } else {
        slideLeft();
        activate();
    }


    setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});

var setFunction=function(){
$("#mobile-menu-toggler").bind('click',function () {
     $("#mobile-menu-toggler").unbind('click');
    $(this).toggleClass('inactive-menu');
    $('#mainmenu-mobile').toggleClass('inactive-menu');
    $("#mobile-menu-wrap").prop("disabled",true);
    if ($(this).hasClass('inactive-menu')) {
        slideRight();
        deactivate();
    } else {
        slideLeft();
        activate();
    }


    setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});

}



//Close menu if clicked outside the box.
$(document).mousedown(function (e) {
    var container = $("#mobile-menu-wrap");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        slideRight();
        deactivate();
    }
});

Updated Link : http://jsfiddle.net/Lam9rwLg/5/