延迟事件监听器 [英] Delay eventListener

问题描述

在 JavaScript 中，我有一个元素(它是一个输入标签).

In JavaScript, I have an element (which is an input tag).

此代码:

element.addEventListener("focus", function () {
    this.parentNode.parentNode.style.outline = this.parentNode.parentNode.dataset.ans_outline;
});

当输入焦点时，轮廓立即改变.

When the input is focused, outline is changed immediately.

我的问题是:我怎么能延迟这个事件?

My question is : how could I delay this event ?

我试过了:

element.addEventListener("focus", function () {
    setTimeout(function(node) {
        node.parentNode.parentNode.style.outline = node.parentNode.parentNode.dataset.ans_outline;
    }(this), 1000)
});

...但它不起作用:(

.. But it doesn't work :(

推荐答案

试试这个:

element.addEventListener("focus", function () {
    var node = this;
    setTimeout(function() {
        node.parentNode.parentNode.style.outline = node.parentNode.parentNode.dataset.ans_outline;
    }, 1000)
});

setTimeout 函数的第一个参数是你的函数想执行(不要直接调用这个函数).

First argument of setTimeout function is function you want to execute (do not call this function directly).

您可以在 node 变量中存储对 this 的引用，然后在超时函数中使用它(请参阅 闭包)

You can store reference to this in node variable and then use it inside your timed out function (see closures)

这篇关于延迟事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！