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

Its called "timers": developer.mozilla.org/en-US/docs/Web/API/setTimeout — Marc
– Marc, Commented May 6, 2022 at 11:06

Tamas Szoke · Accepted Answer · 2022-05-06 11:19:37Z

4

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

edited May 6, 2022 at 11:19

answered May 6, 2022 at 11:13

Tamas Szoke

5,5524 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raja · Accepted Answer · 2022-05-06 11:39:14Z

1

You can simply use CSS transition-delay inside that function

answered May 6, 2022 at 11:39

Raja

331 silver badge7 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Stephen Ostermiller · Accepted Answer · 2022-05-06 11:13:29Z

0

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.

answered May 6, 2022 at 11:13

Stephen Ostermiller♦

25.8k18 gold badges96 silver badges117 bronze badges

Collectives™ on Stack Overflow

How do I add delay within a function in Javascript

3 Answers 3

Example

With your code

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example

With your code

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related