Question

我一直在使用下面的JQuery代码来处理Drupal网站上的菜单的一点响应。在resize函数的两个注释行中，我实际上是尝试根据屏幕大小启用和禁用相反的事件。我的第一个问题是，因为这个处理程序触发将在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);
});

希望有所帮助。

在JQuery上调整多个事件调整大小

2 个答案: