Jquery Mouseover 和 Mouseleave 工具提示（延迟以及如果鼠标在 SetTimeOut 之前移动如何取消）答案

【问题标题】：Jquery Mouseover and Mouseleave Tooltips (delay and how to cancel if mouse is moved before SetTimeOut)Jquery Mouseover 和 Mouseleave 工具提示（延迟以及如果鼠标在 SetTimeOut 之前移动如何取消）
【发布时间】：2022-11-22 10:16:53
【问题描述】：

好的。所以在 $(document).ready(function() {...}

我有代码将事件绑定到具有 .user_tooltip 类的所有链接，该类进行 ajax 调用以获取用户信息。

它运作良好。无论它在页面中的什么位置，它都会在链接旁边显示工具提示。

不幸的是，在我的一生中，当鼠标在超时前离开链接时，我无法弄清楚如何添加延迟和取消延迟。

基本上工具提示会立即显示，这很烦人且无法使用。

我如何添加延迟，以便 ajax 不会触发直到...500 毫秒的鼠标悬停/鼠标输入，如果鼠标离开发生在 500 毫秒之前取消？

我已经尝试了所有我能想到的方法，但它没有用。

代码：

//user_tooltips
    $(document).on('mouseover', '.user_tooltip', function(e){
      e.preventDefault();
      var user_tooltip_link = e.target.href;
      user_tooltip_link = user_tooltip_link.split("/");
      user_tooltip_name = user_tooltip_link[user_tooltip_link.length-1];
      var user_tooltip_username = $("#user_tooltip_username").html();
      if(user_tooltip_username != user_tooltip_name){
        var user_tooltip_ajax_request = $.ajax({
          type: "GET",
          beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
          url: '/user_tooltip_info/' + user_tooltip_name
        });
      }

      displayDiv("user_tooltip", getLeft(this.id) + 45, getTop(this.id));
    });

    $(document).on('mouseleave', '#user_tooltip', function(e){
      $("#user_tooltip").hide();
    });

   $(document).on("click", function(){
    $("#user_tooltip").hide();
  });

【问题讨论】：

使用 setTimeout 延迟 AJAX。如果他们 mouseout，请使用 clearTimeout 取消它。
是的，但如何？引入另一个 function(){...} 几乎打破了一切。抱歉这么密集，但我已经到了我无法清楚地思考该做什么的地步:(
我不明白 AJAX 代码，它没有显示结果的 success: 函数。
是啊，你说得对。显示在显示 tool_tip 的 js.erb (rails) 中处理，这就是为什么我想延迟实际的 ajax 调用。不是最漂亮的代码，但它确实有效。

标签： jquery settimeout delay mouseover mouseleave

【解决方案1】：

在 mouseover 处理程序中启动计时器以显示 AJAX 调用。然后取消 mouseleave 处理程序中的计时器。

对超时使用箭头函数，以便捕获 this。

let tooltip_interval;

$(document).on('mouseover', '.user_tooltip', function(e) {
  e.preventDefault();
  var user_tooltip_link = e.target.href;
  user_tooltip_link = user_tooltip_link.split("/");
  user_tooltip_name = user_tooltip_link[user_tooltip_link.length - 1];
  var user_tooltip_username = $("#user_tooltip_username").html();
  if (user_tooltip_username != user_tooltip_name) {
    tooltip_interval = setTimeout(() => {
      $.ajax({
        type: "GET",
        beforeSend: function(xhr) {
          xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
        },
        url: '/user_tooltip_info/' + user_tooltip_name
      });

      displayDiv("user_tooltip", getLeft(this.id) + 45, getTop(this.id));
    }, 500);
  }


});

$(document).on('mouseleave', '.user_tooltip', function(e) {
  clearTimeout(tooltip_interval);
  $("#user_tooltip").hide();
});

$(document).on("click", function() {
  $("#user_tooltip").hide();
});

【讨论】：

你太棒了！我正用头撞墙试图弄清楚这一点。我已经查找了所有内容，但都没有用，而且我知道我已经为解决它而焦头烂额了。太感谢了。
不幸的是，在第一次延迟和加载后，它会立即返回显示:(我希望我能找到一个解决方法......
我想不出为什么会这样。它应该每次都调用setTimeout()。
displayDiv() 是做什么的？也许那应该是超时的一部分。