How do I add delay within a function in Javascript

Question

I am trying to create a simple function when on click a series of style changes happen to an element.

I want to add a 4-second delay in between the two style changes that I make. I've found a few methods of adding delays before and after a function but not inside a function how can I achieve this?

My Code:

const btnEl = document.getElementById("btnel")
const subtl = document.getElementById("chp1sub")

document.getElementById("chp1sub").style.backgroundColor = "red";

btnEl.addEventListener("click", function(){
    subtl.style.backgroundColor = "blue"
    
// 4 second delay here before running next line

    subtl.style.transform = "translateY(-90px)"
})

Would really appreciate any advice on this

Answer 1

You can simply use the setTimeout method, it runs a function after the time you set in milliseconds. To achieve what you need, you have to set an anonymous function to it.

More information

Example

setTimeout(() => {
  /* Code to run after 4 seconds */
}, 4000)

With your code

const btnEl = document.getElementById("btnel")
const subtl = document.getElementById("chp1sub")

document.getElementById("chp1sub").style.backgroundColor = "red";

btnEl.addEventListener("click", function(){
  subtl.style.backgroundColor = "blue"
    
  setTimeout(() => {
    // 4 second delay here before running next line
    subtl.style.transform = "translateY(-90px)"
  }, 4000)
})

Answer 2

You can simply use CSS transition-delay inside that function

Answer 3

Create an anonymous inner function called by setTimeout

const btnEl = document.getElementById("btnel")
const subtl = document.getElementById("chp1sub")

document.getElementById("chp1sub").style.backgroundColor = "red";

btnEl.addEventListener("click", function(){
    subtl.style.backgroundColor = "blue"
    
    setTimeout(function(){
        subtl.style.transform = "translateY(-90px)"
    },4000)
})

Alternately, because this is a CSS transition, you can use CSS transition-delay with this translation.