jQuery UI Tooltip延迟加载

Question

当鼠标悬停在链接上时，我想在显示带有动态加载工具提示的工具提示之前至少等待一秒钟。

我创建的是以下jQuery代码：

$(document).ready(function () {
  $("div#galleries ul li:not(.active) a").tooltip({
    items: "a",
    show: { delay: 1000 },
    content: 'Loading preview...',        
    open: function (event, ui) {
       previewGallery(event, ui, $(this)); 
    } 
  });
});

function previewGallery(event, ui, aLinkElement) {
    event.preventDefault();    
    ui.tooltip.load("http://www.someurl.com/Preview.aspx #preview");
}

这似乎工作得很好，你可以在这里看到它： http://fotos.amon.cc/（只是将鼠标悬停在画廊列表上）

但是我一开始并没有意识到，当悬停在链接上时，预览文本的加载会立即发生。因此，如果您快速将鼠标悬停在所有链接上，您将设置多个请求：

从用户的角度来看（不知道请求被触发）它看起来已经是我想要的了，但是当工具提示实际显示时，如何才开始加载预览？

谢谢， 多米尼克

Answer 1

我最后做的是使用window.setTimeout和window.clearTimeout：

var galleryToolTipTimer = null;
var previewElement = null;

$(document).ready(function () {

$("div#photos div a img").tooltip();
$("div#galleries ul li:not(.active) a")
    .tooltip({ items: "a", content: 'Loading preview...', disabled: true, open: function (event, ui) { previewElement.appendTo(ui.tooltip.empty()); } })
    .mouseover(function (e) {
        if (galleryToolTipTimer != null) { window.clearTimeout(galleryToolTipTimer); }
        var aLinkObject = $(this);
        galleryToolTipTimer = window.setTimeout(function () { previewGallery(aLinkObject); }, 500);
    }).mouseleave(function (e) {
        window.clearTimeout(galleryToolTipTimer);
        $(this).tooltip("option", { disabled: true });
    });
});
function previewGallery(aLinkElement) {
previewElement = $("<div/>").load(aLinkElement.closest("div").data("galleryPreview") + "/" + aLinkElement.data("path") + " #preview", function () {
    aLinkElement.tooltip("open");        
});    
}

至少按我想要的方式工作。

要查看其中的操作，只需导航至http://fotos.amon.cc/并将鼠标悬停在左侧的其中一个图库链接上进行预览：