setTimeout和點擊元素檢測之外的衝突

Question

我有下面的代碼。它滑動一個手機菜單，具有超時功能，只允許在500毫秒內點擊以防止過度點擊。當用戶在菜單區域外單擊時，它也會關閉。腳本底部的這兩個函數是相互衝突的。這隻發生在特殊情況下的響應網站上 - 如果我在第一頁加載菜單區域外點擊移動菜單時仍然隱藏，然後縮小瀏覽器窗口，菜單顯示爲已滑入。

var togglerWidth = jQuery('#mobile-menu-toggler').css('min-width'); //get width of toggler 

//Slide left function 
var slideLeft = function() { 
    var menuWidth = jQuery('#mainmenu-mobile').width(); //get width of main menu 
    jQuery('#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  
    }); 

    jQuery('#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 = jQuery('#mainmenu-mobile').width(); //get width of main menu 
    jQuery('#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  
    }); 

    jQuery('#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 
    jQuery('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu'); 
} 

var deactivate = function() { //switch back to 'inactive-menu' class 
    jQuery('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu'); 
} 

jQuery("#mobile-menu-toggler").click(function() { 
    jQuery("#mobile-menu-toggler").unbind('click'); 
    jQuery(this).toggleClass('inactive-menu'); 
    jQuery('#mainmenu-mobile').toggleClass('inactive-menu'); 
    jQuery("#mobile-menu-wrap").prop("disabled",true); 
    if (jQuery(this).hasClass('inactive-menu')) { 
     slideRight(); 
     deactivate(); 
    } else { 
     slideLeft(); 
     activate(); 
    } 

//*************THIS FUNCTION HAS A CONFILCT WITH THE ONE BELOW**************** 
setTimeout(function(){setFunction()},500); // 
}); 

var setFunction=function(){ 
jQuery("#mobile-menu-toggler").bind('click',function() { 
    jQuery("#mobile-menu-toggler").unbind('click'); 
    jQuery(this).toggleClass('inactive-menu'); 
    jQuery('#mainmenu-mobile').toggleClass('inactive-menu'); 
    jQuery("#mobile-menu-wrap").prop("disabled",true); 
    if (jQuery(this).hasClass('inactive-menu')) { 
     slideRight(); 
     deactivate(); 
    } else { 
     slideLeft(); 
     activate(); 
    } 

setTimeout(function(){setFunction()},500); // 
}); 
} 

//*************THIS FUNCTION HAS A CONFILCT WITH THE ONE ABOVE**************** 
jQuery(document).mouseup(function (e) { 
    var container = jQuery("#mobile-menu-wrap"); 
    if (!container.is(e.target) && container.has(e.target).length === 0) { 
     slideRight(); 
     deactivate(); 
    } 
}); 

CODEPEN前叉：http://codepen.io/anon/pen/GvAle

Answer 1

如果我是你，我大概做了like this（例如剛）