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

the term 'this' does not pertain to the user object within the mongoose model

Having trouble with overriding an @media query for material-ui react components?

Can the mDNS string received through webRTC be decoded to retrieve a user's IP address?

Warning: The current version of graceful-fs (3) is deprecated in npm

I'm curious about the location where label_color keys are stored within apache-superset

"Adding an active class to a link based on the current page and locale: A step-by-step

Is it possible to include multiple API routes within a single file in NextJS's Pages directory?

Why am I unable to utilize methods in Vue.js?

Randomizer File Name Maker

Employing res.sendStatus(200) in conjunction with JQuery AJAX

finding the initial element within an object using lodash in javascript

What could be the reason behind my inability to successfully install and utilize Bootstrap Multiselect?

Why is Ajax having trouble showing PHP's JSON data? What could be causing the issue with the JSON format?

Having trouble retrieving cookie in route.ts with NextJS

A guide on getting the `Message` return from `CommandInteraction.reply()` in the discord API

When the browser is refreshed, jQuery will automatically scroll the window down

Attempting to modify the key values within an object, however, it is mistakenly doubling the values instead

JSONP request resulted in a syntax error

Swapping out DIVs with jQuery

JQuery shake effect for dynamic text animation