Javascript 在$（window）.width（）之后的鼠标指针称为指数时间。

因此，我有一个侧菜单，根据浏览器窗口的大小左右折叠。在第一次重新加载时，mouseenter和mouseleave会为每个mouseenter和mouseleave调用2次。这不是一个大问题

但是，我是否要调整窗口大小一次，无论大小，鼠标指针都是指数级的；它将被称为~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');
        })
    }

},

showFloatingPanel=函数（）{
//在移动设备上禁用工具弹出文本的动画。目前，它对带有触摸功能的笔记本电脑启用，因为它们仍然使用鼠标。
if（！/Android | webOS | iPhone | iPad | iPod |黑莓| IEMobile | Opera Mini/i.test（navigator.userAgent））{
如果（$（窗口）.width（）<1250）{
$（'.button'）.mouseenter（函数（）{
console.log（“鼠标指针低分辨率”）；
var toolTipLength=$（this.find（“.showToolTip”）.width（）；
$（this）.stop（）.animate（{width:toolTipLength+90，marginLeft:-toolTipLength-55}，70）；
$（this.find（“.showToolTip”）.removeClass（'不可见'）
;
})}
else if（$（窗口）.width（）>1250）{
$（'.button'）.mouseenter（函数（）{
console.log（“鼠标高分辨率”）；
var toolTipLength=$（this.find（“.showToolTip”）.width（）；
$（this.stop（）.animate（{width:toolTipLength+55}，70）；
$（this.find（“.showToolTip”）.removeClass（'不可见'）
;
})}
$（'.button'）.mouseleave（函数（）{
console.log（“鼠标离开”）；
$（this.stop（）.animate（{width:“35px”，marginLeft:“0px”}，70）；
$（this.find（“.showToolTip”）.addClass（'invisible'）；
})
}
},

在调整窗口大小时调用

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事件，因此通常更安全。

是否每次调整窗口大小时都调用

showFloatingPanel

？如果是这样，那就是你的问题了，你每次调用这个方法时都要重新绑定事件。你需要在重新绑定它们之前解开它们。我确实是。我怎么解开绑$（此）.unbind.stop（）.animate？假设没有其他东西将这些事件绑定到此元素，那么应该可以在showFloatingPanel（）方法的顶部执行此操作：$（'.button'）.off（'mouseenter mouseleave'）；剩下的应该没问题（至少，我假设它会起作用，因为mouseenter/leave是使用.on（）的快捷方式，所以.off（）应该删除它们…）。谢谢，我在调用它们之后让它们关闭了，但这不起作用。如果你回答这个问题，我会把它标记为正确的！：）谢谢，很乐意提供帮助-我已将我的评论扩展为一个更完整的答案，并对事件处理程序提出了警告，如果您想将多个事件绑定到按钮，您可能会发现这一警告很有用：）