javascript - 有人可以向我解释一下为什么我会出现堆栈溢出吗？

Question

Updated ( Fixed ) Fiddle Here

Uncaught RangeError: Maximum call stack size exceeded

这是一个简单的自定义标题，当鼠标悬停在元素上时显示。几次显示后它就中断了。

function showtitle(title) {

  $('.button').bind('mousemove', function(e){
    $('.message').fadeIn(600);
    var message = $('.message').css({
      'position' : 'absolute',
      'left' : e.pageX,
      'top'  : e.pageY + 25
    });
    var print = title;
    $('.message').html('<span>' + print + '</span>');

  });

}
function hidetitle() {
  $('.message').hide();
}

Answer 1

每次鼠标移到元素上时，您都会重新绑定(bind) mousemove 事件，但永远不会将其移开。

function moveHandler(e) {
    $('.message').fadeIn(600);

    var message = $('.message').css({
        position: 'absolute',
        left: e.pageX,
        top: e.pageY + 25
    });

    $('.message').empty().append($('<span>', {text: title}));
}

function showtitle(title) {
    $('.button').bind('mousemove', moveHandler);
}

function hidetitle() {
    $('.message').hide();
    $('.button').unbind('mousemove', moveHandler);
}

您还可以始终保持 mousemove 事件并使用 CSS 的 :hover 来显示和隐藏工具提示。

我猜这不是因为浏览器的事件循环，而是因为 jQuery 的事件处理或 jQuery 的动画排队。您还应该在 showtitle 中淡入相应的消息一次，并同时设置其文本；不是每次鼠标移动时。