Question

如何在触发点击事件之前将以下代码延迟半秒？

jQuery('selector').mouseenter(function() { jQuery(this).click() });

我尝试添加.delay＆amp; setTimeout（）但不能让它们起作用。

提前致谢

Answer 1

您使用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调用只是被忽略。

Answer 2

可能是因为您没有意识到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);
});

查询延迟mouseenter

2 个答案: