超時功能，以防止太多的點擊動畫

我有我從頭開始放置在下面的幻燈片菜單代碼。我試圖增加一個超時功能來防止由於多次點擊造成的太多滑動和滑出。每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

超時功能，以防止太多的點擊動畫

回答

相關問題