Задержка eventListener

Question

В JavaScript у меня есть элемент (который является входным тегом).

Этот код:

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

Когда вход сосредоточенные, контур сразу изменился.

Мой вопрос: как я могу отложить это событие?

Я пробовал:

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

.. Но она не работает :(

Answer 1

попробовать это:

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

Первый аргумент setTimeout функции функция, которую вы хотите (не вызывайте эту функцию напрямую).

Вы можете сохранить ссылку на this в node переменной, а затем использовать его внутри вашей тайм-ауту функции (см closures)

Answer 2

Удалите ссылку на this и дать ему таким образом:

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