The full execution of Jquery show() does not pause until it finishes

Question

The full execution of Jquery show() does not pause until it finishes

Here is the sequence I want to achieve:

Show a div element with the CSS class yellow
Execute a function for about 5 seconds
Remove the yellow class and add the green CSS class "state Ok"

However, when running my code, the div container does not appear until after the function has finished. What am I missing?

function sleepFor(sleepDuration) {
    var now = new Date().getTime();
    while (new Date().getTime() < now + sleepDuration) { /* do nothing */ }
}



function DoIt() {
    $('#divState').show(100, function() {});
    sleepFor(1000);    
    $("#divState").removeClass("Yellow").addClass("Green");
}

div {
    display: none;
}


div.Green {
    border: 1px solid black;
    background-color: #93EEAA;
}

div.Yellow {
    border: 1px solid black;
    background-color: #FFEE99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="button" onclick="DoIt()" value="run" />
<div class="Yellow" id="divState">Some Text</div>

javascript jquery html css show-hide

Answer 1

Answer №1

If your goal is to display an element, you can achieve this using jquery.show. You can also add a delay if needed by utilizing jquery.delay, followed by queuing up the removal of the "Yellow" class and addition of the "Green" class using jquery.queue.

function DoIt() {
    $('#divState').show(100).delay(1000).queue(function(){
          $(this).removeClass("Yellow").addClass("Green");
          $.dequeue(this)
      });
   
}

div {
    display: none;    
}


div.Green {
    border: 1px solid black;
    background-color: #93EEAA;
}

div.Yellow {
    border: 1px solid black;
    background-color: #FFEE99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="button" onclick="DoIt()" value="run" />
<div class="Yellow" id="divState">Some Text</div>

Answer 2

If your goal is to display an element, you can achieve this using jquery.show. You can also add a delay if needed by utilizing jquery.delay, followed by queuing up the removal of the "Yellow" class and addition of the "Green" class using jquery.queue.

function DoIt() {
    $('#divState').show(100).delay(1000).queue(function(){
          $(this).removeClass("Yellow").addClass("Green");
          $.dequeue(this)
      });
   
}

div {
    display: none;    
}


div.Green {
    border: 1px solid black;
    background-color: #93EEAA;
}

div.Yellow {
    border: 1px solid black;
    background-color: #FFEE99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="button" onclick="DoIt()" value="run" />
<div class="Yellow" id="divState">Some Text</div>

Answer 3

Answer №2

Have you ever wondered why some developers use an empty while loop in their JavaScript code? In reality, there is a native method available that allows you to wait for a specific amount of time without the need for such loops. If you had simply searched online, you would have discovered this handy function right away.

setTimeout(function() {
    $("#divState").removeClass("Yellow").addClass("Green");
},5000);

By using the setTimeout method, you can effectively pause execution for 5000 milliseconds before triggering the specified callback function. This can be easily incorporated into your button click event like so (assuming your button has the id myButton):

$("#myButton").click(function(){
    setTimeout(function() {
        $("#divState").removeClass("Yellow").addClass("Green");
    },5000);
});

This approach is far superior to relying on the "onclick" attribute within your HTML elements, as it promotes unobtrusive coding practices and helps maintain cleaner code overall.

Answer 4

Have you ever wondered why some developers use an empty while loop in their JavaScript code? In reality, there is a native method available that allows you to wait for a specific amount of time without the need for such loops. If you had simply searched online, you would have discovered this handy function right away.

setTimeout(function() {
    $("#divState").removeClass("Yellow").addClass("Green");
},5000);

By using the setTimeout method, you can effectively pause execution for 5000 milliseconds before triggering the specified callback function. This can be easily incorporated into your button click event like so (assuming your button has the id myButton):

$("#myButton").click(function(){
    setTimeout(function() {
        $("#divState").removeClass("Yellow").addClass("Green");
    },5000);
});

This approach is far superior to relying on the "onclick" attribute within your HTML elements, as it promotes unobtrusive coding practices and helps maintain cleaner code overall.

The full execution of Jquery show() does not pause until it finishes

Answer №1

Answer №2

Similar questions

What is the best way to choose an Animatedmodal that can showcase various demos while using just one ID?

Can the month dropdown in react-datepicker be modified to display numbers instead of names?

Ways to deactivate remaining buttons until a function call finishes after selecting one in a react render() function?

Chrome and Internet Explorer are not prompting to save passwords after the input type has been altered by a script

Exploring Django's HTML QuerySet

Checkboxes within Angular's reactive forms are a powerful tool for creating dynamic user

Preventing state changes from affecting the rendering of a Material-UI table in a ReactJS application

What could be causing my code to lag by 2 ticks instead of just 1?

Loading images in advance using jCarousel

What is the meaning of a "hook" in the world of HTML?

Utilize the Image URL for training your Tensorflow.js application

Parcel js is encountering difficulties running the same project on Ubuntu

The body parser is designed to efficiently parse and handle both gzip and json formatted HTTP POST request bodies

What is the best way to redirect a user to a different URL in Express while also sending additional data along with the request

Converting and storing Canvas data as a blob, and then saving the blob as

Implementing auto-complete functionality using two keys in Material UI and React

The vertical scroll function in JQueryMobile Autocomplete seems to be malfunctioning on Android devices

Exploring the Depackaging of ES6 Nested Objects

Utilize the composite primary key of an Entity within Typeorm for efficient data retrieval

Consistent Row Heights for Dynamic Width Elements