Jquery鼠标悬停和鼠标悬停工具提示(如果在SetTimeOut之前移动鼠标，则延迟以及如何取消)

Question

好的，所以在$(document).ready(function()｛…｝中

我有一段代码，它使用一个类.user_toltip将事件绑定到所有链接，该类进行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();
});

Answer 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();
});