CODEWITHSUNDEEP
javascriptjqueryanimationdelaysettimeout
geochanto
geochanto

Reputation: 1002

Timeout Function to Prevent too many click animations

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/

Upvotes: 2

Views: 725

Answers (2)

Lalit Bhudiya
Lalit Bhudiya

Reputation: 4408

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/

Upvotes: 1

Hatjhie
Hatjhie

Reputation: 1365

Hopefully the below code helps you. Please let me know if it's working as per your intention. Below is the updated javascript codes.

So it does:

  1. Once the click event is clicked, the event subscription would be removed.
  2. There would be setTimeout event to subscribe the event click again.

By doing that, the multiple clicking can be prevented.

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

Upvotes: 0

Related Questions