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

Question

下面的滑入式菜单代码是我从头开始拼凑起来的。我正在尝试添加超时功能，以防止由于多次单击而导致过多的滑入和滑出。每 200 毫秒只有一次点击应该真正触发动画。我试了又试，但无法弄清楚。帮助！ :)

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

小提琴：http://jsfiddle.net/Lam9rwLg/2/

Answer 1

使用此代码。定时器设置为 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/

Answer 2

希望下面的代码对您有所帮助。请让我知道它是否按照您的意图工作。以下是更新的 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();
    }
});