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

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

Answer 2

Это должно работать сразу:

} 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 секунды, это не так лучшие из лучших практик.

Answer 3

вы можете использовать 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);
      }
     }