防止过多点击动画的超时功能

使用此代码。计时器设置为2秒。根据需要进行更改。

//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();
    }
});

更新的链接：http://jsfiddle.net/Lam9rwLg/5/

希望下面的代码能对您有所帮助。请告诉我它是否按你的意图工作。以下是更新后的javascript代码。

的确如此：

1. 单击事件后，事件订阅将被删除
2. 会有setTimeout事件来订阅事件再次单击

通过这样做，可以防止多次单击。

//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');
}
$(function(){
    TogglerClickSetup();
});
function TogglerClickSetup() {
    $("#mobile-menu-toggler").click(function () {
        $("#mobile-menu-toggler").off();
        $(this).toggleClass('inactive-menu');
        $('#mainmenu-mobile').toggleClass('inactive-menu');
        if ($(this).hasClass('inactive-menu')) {
            slideRight();
            deactivate();
        } else {
            slideLeft();
            activate();
        }
        window.setTimeout(TogglerClickSetup, 500);
     });
}
//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();
    }
});