使用 jQuery 切换类时，CSS 样式不会立即应用

Question

I am trying to change the style of an element while some javascript is running in the background, to indicate that the page is 'busy' or 'loading'. I've been attempting to do this by toggling a class on at the start of the JS script with jQuery's .toggleClass() , and toggling it off at the end, with some suitable CSS styling attached to the class.

Although the class is toggled immediately, the CSS styling attached to it doesn't apply until after the JS has finished executing, however. So if the class is toggled both on and off, the user does not see any change in style.

I've included a simple example below. How can I force the change in CSS styling to apply immediately, before the rest of the JS code executes?

 $(function() { $('#box').click(function() { // Toggle class 'red' on. $(this).toggleClass('red'); // Do something that takes time. for (i = 0; i < 10000; i++) { console.log(i); } // Toggle class 'red' off. $(this).toggleClass('red'); }); });

 .wrapper { margin: 15px; text-align: center; color: #000; } #box { margin: 15px 0; width: 100px; height: 100px; line-height: 100px; cursor: pointer; background: #ccc; border: solid 3px #ccc; -webkit-transition: all .3s linear 0s; transition: all .3s linear 0s; } #box.red { background: #f43059; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div id="box">Click me.</div> </div>

Answer 1

The problem is that your "something that takes time" is synchronous and blocking - while it's operating, browser repainting will be disabled.

One option would be to listen to a transitionend event, to ensure that the animation to red completes before the resource-intensive operation runs.

So that the removal of .red animates properly too, you could set a setTimeout right after the heavy operations finish. Note that your code will a bit be clearer if you use addClass and removeClass instead of toggleClass :

 $('#box').click(function() { $(this).one('transitionend', () => { // Do something that takes time. for (i = 0; i < 1000; i++) { console.log(i); } // Toggle class 'red' off. setTimeout(() => { $(this).removeClass('red'); }); }); $(this).addClass('red'); });

 .wrapper { margin: 15px; text-align: center; color: #000; } #box { margin: 15px 0; width: 100px; height: 100px; line-height: 100px; cursor: pointer; background: #ccc; border: solid 3px #ccc; -webkit-transition: all .3s linear 0s; transition: all .3s linear 0s; } #box.red { background: #f43059; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div id="box">Click me.</div> </div>