超时功能，以防止太多的点击动画

我有我从头开始放置在下面的幻灯片菜单代码。我试图增加一个超时功能来防止由于多次点击造成的太多滑动和滑出。每200ms只有一次点击应该实际触发动画。我试过并尝试过，但无法弄清楚。帮帮我！ :)超时功能，以防止太多的点击动画

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/

来源

2014-10-07 George Chanturidze

你可能想用'.stop（真，真）'。请参阅：http://api.jquery.com/stop/ – 2014-10-07 23:27:23

我以前曾尝试过。这是可以的，因为它可以防止过多的动画，但是如果您在短时间内意外点击两次，它会打开并关闭您。 – 2014-10-07 23:40:31

你想接受领先的点击吗？或只有最后一次点击？，即当用户再次点击一个按钮，然后在150ms内再次点击，你是否希望它只触发第一个，忽略第二个，反之亦然？ – 2014-10-07 23:54:00

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

来源

2014-10-08 02:39:32

希望下面的代码可以帮助你。请让我知道它是否按照您的意图工作。以下是更新的JavaScript代码。

所以它的作用：

一旦点击点击事件，事件订阅将被删除。

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

来源

2014-10-08 01:52:07 Hatjhie

超时功能，以防止太多的点击动画

回答

相关问题