如何在触发点击事件之前将以下代码延迟半秒?
jQuery('selector').mouseenter(function() { jQuery(this).click() });
我尝试添加.delay& setTimeout()但不能让它们起作用。
提前致谢
答案 0 :(得分:2)
您使用setTimeout
:
jQuery('selector').mouseenter(function() {
var $elm = jQuery(this);
setTimeout(function() {
$elm.click()
}, 500);
});
但请注意,即使鼠标在该半秒内离开元素,也会触发点击。如果要在鼠标离开元素时取消单击,则必须记住计时器句柄并取消:
jQuery('selector')
.mouseenter(function() {
var $elm = jQuery(this),
timer = $elm.data("timer");
if (timer) {
clearTimeout(timer);
}
$elm.data("timer", setTimeout(function() {
$elm.click()
}, 500));
})
.mouseleave(function() {
var $elm = jQuery(this),
timer = $elm.data("timer");
if (timer) {
clearTimeout(timer);
$elm.removeData("timer");
}
})
;
当鼠标进入元素时,使用data
来保存计时器句柄,如果鼠标离开元素,它将取消计时器。我们可以取消不存在的计时器(例如,如果计时器在鼠标离开元素之前触发),这是正常情况,clearTimeout
调用只是被忽略。
答案 1 :(得分:0)
可能是因为您没有意识到setTimeout
,因此更改了this
上下文。您的选择是使用bind
(ECMA 5 addition之类的内容保留上下文;如果您需要支持旧浏览器,jQuery通过.proxy()
提供自己的版本...)
jQuery('selector').mouseenter(function() {
setTimeout(function() { jquery(this).trigger('click'); }.bind(this), 1000);
});
...或者首先在var:
中存储对外部作用域(元素)的引用jQuery('selector').mouseenter(function() {
var el = jquery(this);
setTimeout(function() { el.trigger('click'); }, 1000);
});