How do I call a function (wait a few seconds) and then call another?

Question

I'm creating a program where I basically have this button that I made in CSS, and I want him to (when clicked) flash a color, and then 200ms later, return the color to normal, and for some reason I can't get it to work right

function highlight_button(button_id){
    button_id.style.backgroundColor="yellow"
    sleep(200)
    button_id.style.backgroundColor="red"
}

function sleep(milliseconds) {
    const date = Date.now();
    let currentDate = null;
    do {
        currentDate = Date.now();
        } 
    while (currentDate - date < milliseconds);
}

 highlight_button(myButton);

<button id="myButton">Press</button>

what I thought would happen was the following: -the button would appear yellow immediately -the program would wait 0.2 seconds -the button would appear red

however... the following happens: -the program would wait 0.2 seconds -the button would appear red

the reason I had a sleep function was because setTimeout() didn't let me give arguments in the functions. p.s. I had forgotten to show the sleep function and I have already edited it — Sharplet, May 15 '23 at 16:13
You don't need any arguments. `setTimeout(() => button.style.backgroundColor="red", 200)` — Barmar, May 15 '23 at 16:16
Your code doesn't work because the DOM changes aren't rendered until JavaScript returns to the main event loop. — Barmar, May 15 '23 at 16:16
thanks man, it works, I'm quite new to the syntax of javascript (since I used python for so god damn long) thanks — Sharplet, May 15 '23 at 16:18
`new to the syntax of javascript (`, it's not really the syntax here, but the way JS runs an event loop. Basically all JS work inside a browsers main thread should never block for long periods of time. The good news, modern JS has `async / await`, and working to these restrictions isn't as hard as it used to be.. :) — Keith, May 15 '23 at 16:23
Does this answer your question? [How can I wait In Node.js (JavaScript)? l need to pause for a period of time](https://stackoverflow.com/questions/14249506/how-can-i-wait-in-node-js-javascript-l-need-to-pause-for-a-period-of-time) — Darryl Noakes, Jun 29 '23 at 18:09

score 1 · Answer 1 · edited Jun 29 '23 at 18:15

1

You can use setTimeout:

setTimeout(() => {
  // Code to run later goes here.
  console.log('Timeout completed!');
}, 2000); // Time till execution, in milliseconds.

The callback will be called after the specified delay.

edited Jun 29 '23 at 18:15

Darryl Noakes

2,207
1
9
27

answered May 15 '23 at 16:25

Rohit Rai

11
2

score 0 · Answer 2 · answered May 15 '23 at 16:14

0

use setTimeout(). your code just hangs the browser. or better use CSS transition or animation.

answered May 15 '23 at 16:14

Alexander Nenashev

8,775
2
6
17

score 0 · Answer 3 · edited Jun 29 '23 at 18:17

0

function highlight_button(button_id) {
  button_id.style.backgroundColor = "yellow";
}

highlight_button(id);
setTimeout(() => {
  button_id.style.backgroundColor = "red";
}, 200);

edited Jun 29 '23 at 18:17

Darryl Noakes

2,207
1
9
27

answered May 15 '23 at 16:22

Sharplet

21
4

score 0 · Answer 4 · answered Jun 29 '23 at 18:32

let button_id = document.querySelector("#myButton");

async function highlight_button(button_id){
    button_id.style.backgroundColor="yellow";
   //waits promise to be all settled
   await sleep(500)
    button_id.style.backgroundColor="red"
}

function sleep(milliseconds) {
  return new Promise((resolve,reject) => {
     setTimeout(() =>{
    //some task can be done
    
    //promise will be in pending until it gets resolved/rejected
    resolve(true);
   }, milliseconds)
  })
}

 highlight_button(myButton);

<button id="myButton">Press</button>

How do I call a function (wait a few seconds) and then call another?

4 Answers4