Question

所以我有一个可以向右或向左折叠的侧边菜单，具体取决于浏览器窗口的大小。在第一次重新加载时，对于每个mouseenter和mouseleave，将mouseenter和mouseleave调用2次。这不是一个大问题。

然而，我是否一次调整窗口的大小，无论多少，鼠标中心都是指数级的;它将被称为~12倍pr。 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()目前每次重新绑定事件处理程序，导致您看到的指数增加。

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

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

但请注意，如果您希望另一种方法也绑定到$('.button')的mouseenter / mouseleave，则上述内容也会解除绑定。在这种情况下，您需要绑定到命名的事件处理程序而不是匿名函数，如下所示：

// 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（）绑定的mouseenter / mouseleave事件，因此通常更安全。

在$（window）.width（）之后，mouseenter被称为指数时间。

1 个答案: