Javascript 如何让jQuery对话框在显示之前等待？

我希望jQuery对话框在用户将鼠标悬停在图像上3秒钟后显示。目前我有：

$(".imgLi").live('hover', function() {
    showDialog();
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>

$（“.imgLi”）.live（'hover'，function（）{
showDialog（）；
});
函数showDialog（）
{
$（'#imageDialogDiv'）。对话框({
莫代尔：对
});
}
...

---

也不确定时间代码放在哪里，或者如何在这里实现jQuery的计时器对象。如果在这3秒钟的时间范围内的任何时间点使用“mouses away”（将鼠标移离图像），我不希望显示该对话框。提前感谢您在此提供的帮助。

对不起，我在mouseout上添加了一个cleartimeout，因此如果用户将鼠标移开，它将不会执行

$(document).on('mouseenter', ".imgLi", function() {
    var t=setTimeout("showDialog()",3000);
}).on('mouseleave', ".imgLi", function() {
    clearTimeout(t);
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>

$（document）.on（'mouseenter'，“.imgLi”，function（））{
var t=setTimeout（“showDialog（）”，3000）；
}).on（'mouseleave'，.imgLi'，function（）{
清除超时（t）；
});
函数showDialog（）
{
$（'#imageDialogDiv'）。对话框({
莫代尔：对
});
}
...

对不起，我在mouseout上添加了一个cleartimeout，因此如果用户将鼠标移开，它将不会执行

$(document).on('mouseenter', ".imgLi", function() {
    var t=setTimeout("showDialog()",3000);
}).on('mouseleave', ".imgLi", function() {
    clearTimeout(t);
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>

$（document）.on（'mouseenter'，“.imgLi”，function（））{
var t=setTimeout（“showDialog（）”，3000）；
}).on（'mouseleave'，.imgLi'，function（）{
清除超时（t）；
});
函数showDialog（）
{
$（'#imageDialogDiv'）。对话框({
莫代尔：对
});
}
...

简单JSFIDLE：

---

简单JSFIDLE:

您可以在悬停3秒后显示该对话框，如果用户在悬停3秒之前将鼠标移走，则不会使用此类代码显示该对话框

我还将代码迁移到使用

.on（）

，因为

.live（）

在所有版本的jQuery中都被弃用。您应该使用更接近

“.imgLi”

对象的静态父元素替换此代码中的

文档

，以获得更好的性能

var dialogTimer = null;
$(document).on('mouseenter', ".imgLi", function() {
    if (!dialogTimer) {
        dialogTimer = setTimeout(function() {
             dialogTimer = null;
             showDialog();
        }, 3000);
    }
}).on('mouseleave', ".imgLi", function() {
    if (dialogTimer) {
        clearTimeout(dialogTimer);
        dialogTimer = null;
    }
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>

var dialogTimer=null；
$（document）.on（'mouseenter'，“.imgLi”，function（））{
if（！dialogTimer）{
dialogTimer=setTimeout（函数（）{
dialogTimer=null；
showDialog（）；
}, 3000);
}
}).on（'mouseleave'，.imgLi'，function（）{
如果（对话框计时器）{
clearTimeout（dialogTimer）；
dialogTimer=null；
}
});
函数showDialog（）
{
$（'#imageDialogDiv'）。对话框({
莫代尔：对
});
}
...

您可以在悬停3秒后显示该对话框，如果用户在悬停3秒前将鼠标移走，则不会使用此类代码显示该对话框

我还将代码迁移到使用

.on（）

，因为

.live（）

在所有版本的jQuery中都被弃用。您应该使用更接近

“.imgLi”

对象的静态父元素替换此代码中的

文档

，以获得更好的性能

var dialogTimer = null;
$(document).on('mouseenter', ".imgLi", function() {
    if (!dialogTimer) {
        dialogTimer = setTimeout(function() {
             dialogTimer = null;
             showDialog();
        }, 3000);
    }
}).on('mouseleave', ".imgLi", function() {
    if (dialogTimer) {
        clearTimeout(dialogTimer);
        dialogTimer = null;
    }
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>

var dialogTimer=null；
$（document）.on（'mouseenter'，“.imgLi”，function（））{
if（！dialogTimer）{
dialogTimer=setTimeout（函数（）{
dialogTimer=null；
showDialog（）；
}, 3000);
}
}).on（'mouseleave'，.imgLi'，function（）{
如果（对话框计时器）{
clearTimeout（dialogTimer）；
dialogTimer=null；
}
});
函数showDialog（）
{
$（'#imageDialogDiv'）。对话框({
莫代尔：对
});
}
...

我使用了Brian Cherne的插件，效果非常好-您可以轻松地将其配置为您想要的精确延迟。我认为它不适用于

.live

（请参阅）

我使用了Brian Cherne的插件，效果非常好-您可以轻松地将其配置为所需的精确延迟。我认为它不适用于

.live

（请参阅）

这将在3秒钟内显示对话框，即使用户将鼠标移开，这不是OP想要的。另外，最好执行

setTimeout（showDialog，3000）

Ya我错过了它，所以我添加了一个clearTimeout，应该可以处理它。

t

在

timedCount（）

范围中声明，因此在

mouseout

处理程序中无法访问。另外，

.live（）

的参数也错误。这将导致语法错误。我已经修复了它，但无论如何都应该使用，因为live已弃用。不管怎样，我认为你的答案是完美的。这将在3秒钟内显示对话框，即使用户将鼠标移开，这不是OP想要的。另外，最好执行

setTimeout（showDialog，3000）

Ya我错过了它，所以我添加了一个clearTimeout，应该可以处理它。

t

在

timedCount（）

范围中声明，因此在

mouseout

处理程序中无法访问。另外，

.live（）

的参数也错误。这将导致语法错误。我已经修复了它，但无论如何都应该使用，因为live已弃用。不管怎样，我认为你的答案是完美的。