javascript - $(window).width()之后mouseenter被称为指数倍。

Question

所以我有一个侧边菜单，可以根据浏览器窗口的大小向右或向左折叠。第一次重新加载时，每个 mouseenter 和 mouseleave 都会调用 mouseenter 和 mouseleave 两次。这不是一个大问题。

但是，我是否调整窗口大小一次，无论调整多少，mouseenter 都会以指数方式调用；它将被调用约 12 次。 mouseenter 和 mouseleave 等等，并重新调整大小。直到该栏因为被调用太多次而变得迟缓。

这是我的代码

showFloatingPanel = function () {
    //Disables the animation for the tool popups text on mobile devices. For now its enabled for laptops with touch, because they still use mouse.
        if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {


        if($(window).width() < 1250){

            $('.button').mouseenter(function () {
                console.log("mouseenter low res");

                var toolTipLength = $(this).find(".showToolTip").width();
            $(this).stop().animate({width: toolTipLength+90, marginLeft: -toolTipLength-55}, 70);
            $(this).find(".showToolTip").removeClass('invisible')
            ;
        })}
        else if ($(window).width() > 1250) {

            $('.button').mouseenter(function () {
                console.log("mouseenter high res");

                var toolTipLength = $(this).find(".showToolTip").width();
            $(this).stop().animate({width: toolTipLength+55}, 70);
            $(this).find(".showToolTip").removeClass('invisible')
            ;
        })}


        $('.button').mouseleave(function () {
            console.log("Mouse leave");

            $(this).stop().animate({width: "35px", marginLeft: "0px"}, 70);
                $(this).find(".showToolTip").addClass('invisible');
        })
    }

},

Answer 1

在调整窗口大小时调用 showFloatingPanel() 当前每次都会重新绑定(bind)事件处理程序，导致您看到的指数级增长。

假设您没有其他方法将 mouseenter/mouseleave 绑定(bind)到 $('.button') 元素，您应该能够在 showFloatingPanel 顶部使用 .off() () 方法删除事件绑定(bind)，然后允许通过该方法将它们添加回来，如下所示:

showFloatingPanel = function () {
  $('.button').off('mouseenter mouseleave');
  // rest of your method here
}

但请注意，如果您想要一个不同的方法也绑定(bind)到 $('.button') 的 mouseenter/mouseleave，上面的代码也会取消绑定(bind)这些事件。在这种情况下，您需要绑定(bind)到命名事件处理程序而不是匿名函数，如下所示:

// declare this method outside of your showFloatingPanel() method
function lowResEnter() {
    console.log("mouseenter low res");
    var toolTipLength = $(this).find(".showToolTip").width();
    $(this).stop().animate({width: toolTipLength+90, marginLeft: -toolTipLength-55}, 70);
    $(this).find(".showToolTip").removeClass('invisible')
    ;
})}

// and then from within showFloatingPanel() bind like this
$('.button').on('mouseenter', lowResEnter);

上面仅删除了由 showFloatingPanel() 绑定(bind)的 mouseenter/mouseleave 事件，因此通常更安全。