jQuery UI Tooltip 延迟加载答案

【问题标题】：jQuery UI Tooltip delayed loadingjQuery UI Tooltip 延迟加载
【发布时间】：2014-01-30 09:15:10
【问题描述】：

将鼠标悬停在链接上时，我希望至少等待一秒钟，然后再显示带有动态加载的工具提示的工具提示。

我创建的是以下 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/（只需将鼠标悬停在画廊列表上）

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

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

谢谢，多米尼克

【问题讨论】：

您是否尝试过将 tooltipp init 放入一个函数并使用 setTimout() on('mouseover') 调用它？
或许能解决问题，但 jQuery 没有提供合适的方法吗？
现在链接看起来好像你做对了。如果您已经解决了，请分享您的答案。
@Foreever 我确实找到了一种工作方法，但我仍然认为这是一种解决方法：fotos.amon.cc/Library/JavaScript/GalleryTooltip.js 如果接下来几天没有答案，我将提出我的解决方法，也许有人有改进它的想法。

标签： jquery-ui jquery-load jquery-tooltip timedelay

【解决方案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/ 并将鼠标悬停在左侧的其中一个图库链接上进行预览：

【讨论】：