在JQuery調整大小時觸發多個事件

Question

我一直在使用下面的JQuery代碼來處理Drupal網站上菜單的一點響應。 在調整大小功能的兩條注釋行中，我實質上是嘗試根據屏幕大小啟用和​​禁用相反的事件。 我的第一個問題是，因為此處理程序觸發將在resize函數中進行，是否會導致某種形式的顯着性能下降嘗試這種情況？ 我的第二個問題是？ 我一直在嘗試使用on和off函數來根據需要啟用/禁用這些處理程序，但是我認為總體語法沒有正確。 我認為最好將現有的事件處理程序分解為函數，但對於代碼示例，應保留它們。

jQuery(document).ready(function($) {
  $('.nav-toggle').click(function() {
   $('#main-menu div ul:first-child').slideToggle(250);
   return false;
});

if( ($(window).width() > 600) || ($(document).width() > 600) ) {
  $('#main-menu li').mouseenter(function() {
    $(this).children('ul').css('display', 'none').stop(true, 
    true).slideToggle(1).css('display', 
    'block').children('ul').css('display', 'none');
  });

  $('#main-menu li').mouseleave(function() {
    $(this).children('ul').stop(true, true).fadeOut(1).css('display', 'block');
  })
    } 

else {
$('.drop-down-toggle').click(function() {
  $(this).parent().children('ul').slideToggle(500);
});
}

 $(window).resize(function() {
 if($(window).width() > 600) {
    $('div.menu-navigation-container ul.menu').css('display','block');
    $('div.menu-navigation-container ul.menu ul.menu').hide();
    //**Disable dropdown click and enable mouse enter and mouse leave**
 }
 else{
    $('div.menu-navigation-container ul.menu').hide();
    //**Disable mouse enter and mouse leave but enable dropdown click**
 }
});

});

Answer 1

使用油門功能

function throttle (callback, limit) {
    var wait = false;                 // Initially, we're not waiting
    return function () {              // We return a throttled function
        if (!wait) {                  // If we're not waiting
            callback.call();          // Execute users function
            wait = true;              // Prevent future invocations
            setTimeout(function () {  // After a period of time
                wait = false;         // And allow future invocations
            }, limit);
        }
    }
}

$(window).on('resize', throttle(yourResizeFunction, 200))

在這里閱讀原因： http ： //www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Answer 2

正如我所說，將事件綁定移到resize函數之外，因為在resize / scroll中綁定事件處理程序根本不是一個好主意，因為您將為每個調整大小的像素一遍又一遍地綁定同一事件！

一個示例如下所示：

$(document) // or you can even use 'div.menu-navigation-container' as opposed to document
.on("click", ".click", function() {})
.on("mouseenter", ".hover", function() {})
.on("mouseleave", ".hover", function() {});

$(window).resize(function() {
    //A bit of breathing time when the resize event pauses. Remember, the statements within the resize will trigger for every pixel resize, otherwise.
    setTimeout(function() {
        if( $(window).width() > 600 ) {
            $('div.menu-navigation-container ul.menu').css('display','block');
            $('div.menu-navigation-container ul.menu ul.menu').hide();
            //I am assuming your selector on which the events are bound to be '.menu-trigger' as you did not post any HTML. Replace this with the appropriate selector.
            $(".menu-trigger").removeClass("click").addClass("hover");
        }
        else{
            $('div.menu-navigation-container ul.menu').hide();
            //I am assuming your selector on which the events are bound to be '.menu-trigger' as you did not post any HTML. Replace this with the appropriate selector.
            $(".menu-trigger").removeClass("hover").addClass("click");
        }
    }, 250);
});

希望能有所幫助。