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

Question

在我的站点上，我有一个执行以下代码的 addEventListener。 variables/constants 定义如下：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

您可以使用 javascript setTimeout 方法在指定的毫秒数后调用函数

    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');
        var headerSearchField =document.getElementById("header-search-field-input");
        setTimeout(() =>  headerSearchField.focus(), 2000);
      }
     }

Answer 2

setTimeout(function() {
  document.getElementById("header-search-field-input").focus();
}, 2000);

Answer 3

这应该会立即生效：

} 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 秒，这不是最佳实践中的最佳实践。

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

Javascript execute two functions addEventlistener and delay one of them

javascript

addeventlistener

settimeout