Javascript pause within function

Question

In the example below I want to pause the script after changing the style of element one. Then after 500 miliseconds, proceed to change the style of element two. As setTimeout() requires a function parameter, how do I achieve this without delaying the entire function?

Note: the function is called by onclick="myFunction()" on an HTML element.

function myFunction() {

    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

    // Execute for element 1
    elementOne.style.cssText = "some styles";

    // Wait 500 miliseconds

    // Execute for element 2
    elementTwo.style.cssText = "some styles";
}

What do you mean by "*without delaying the entire function*"? Can you show us how you would have used `setTimeout`? — Bergi, Aug 28 '21 at 13:50

Rifky Niyas · Accepted Answer · 2021-08-28T14:04:25.013

As setTimeout() requires a function parameter, how do I achieve this without delaying the entire function?

You can use setTimeout() and pass a function which changes the style for element 2.

It doesn't delay your the entire function. (In your example myFunction). Instead it just delays the execution of the anonymous function which you pass in as a parameter.

function myFunction() {

    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

    // Execute for element 1
    elementOne.style.cssText = "some styles";

    // Wait 500 miliseconds
    setTimeout(function(){ 
     // Execute for element 2
     elementTwo.style.cssText = "some styles"; 
     }, 500);
}

Leander Hass · Answer 2 · 2021-08-28T13:50:08.380

0

I guess you would just put the Code you want delayed inside an anonymous function like so:

function myFunction() {

    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

    // Execute for element 1
    elementOne.style.cssText = "some styles";

    // Wait 500 miliseconds

    // Execute for element 2
    setTimteout(() => {
        elementTwo.style.cssText = "some styles";
    }, 500);
}

edited Aug 28 '21 at 13:50

answered Aug 28 '21 at 13:43

Leander Hass

162
2
3
13

1

The style change should be in the `setTimeout`, not the variable declaration – Barmar Aug 28 '21 at 13:43

score 0 · Answer 3 · answered Aug 28 '21 at 13:46

function myFunction() {

    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

   // Execute for element 1
   elementOne.style.cssText = "some styles";

   // Wait 500 miliseconds

   // Execute for element 2
   setTimteout(() => {
     elementTwo.style.cssText = "some styles";
   }, 500);  
}

Javascript pause within function

3 Answers3