Javascript execute two functions addEventlistener and delay one of them

user_11602380 0
Viewed 69

On my site I have an addEventListener that executes the following code. The variables/constants are defined like this: const header_search_form = document.querySelector('.header-search-form');.

What I need is that this part of the code is executed with a delay of 2 seconds: document.getElementById("header-search-field-input").focus();. The other code should be executed normally, with the if condition also being respected. I already tried some things, but that didn't work. 

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();
}
}

It would be great if someone could show me how to change the code!

addeventlistener settimeout javascript
3 Answers

you could use javascript setTimeout method which calls a function after a specified number of milliseconds

    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);
      }
     }
user_98717560 
setTimeout(function() {
  document.getElementById("header-search-field-input").focus();
}, 2000);
user_104565190

This should works straight away:

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

The same stuff using an arrow function:

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

Notice, it might blocks user interaction for 2 seconds, this isn't the best of the best practice.

user_24947540
Related