Javascript执行两个函数addEventlistener并延迟其中之一

Question

在我的网站上，我有一个执行以下代码的 addEventListener。变量/常量的定义如下:const header_search_form = document.querySelector('.header-search-form');。

我需要的是这部分代码延迟2秒执行:document.getElementById("header-search-field-input").focus();。其他代码应该正常执行，同时也遵守 if 条件。我已经尝试过一些事情，但是没有用。

header_search_button.addEventListener('click', onClickOpensearch);

function onClickOpensearch(){

if(header_search_container.classList.contains('open')){
    header_parent.classList.remove('open');
    header_search_background.classList.remove('open');
    document.getElementById("header-search-field-input").blur();
    document.getElementById("header-search-field-input").value = "";
} else {
    header_parent.classList.add('open');
    header_search_background.classList.add('open');
    document.getElementById("header-search-field-input").focus();
}
}

如果有人能告诉我如何更改代码，那就太好了!

Answer 1

这应该可以立即生效:

} else {
    header_parent.classList.add('open');
    header_search_background.classList.add('open');
    setTimeout(function(){
       document.getElementById("header-search-field-input").focus();
    }, 2000)
}

使用箭头函数的相同内容:

} else {
    header_parent.classList.add('open');
    header_search_background.classList.add('open');
    setTimeout(() => {
       document.getElementById("header-search-field-input").focus();
    }, 2000)
}

请注意，它可能会阻止用户交互 2 秒，这不是最佳实践中的最佳做法。