How to change background color before calling a function or doing something else

Question

I want to change the color of the "lol" button before calling testFunction() .

 function testFunction() { for (var i = 0; i < 200; i++) { console.log(i); } return 0; } $("button").click(function() { $("button").css("background-color", "#6ddc5d"); testFunction(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>lol</button> 

And How Can I do the same, without a function? Example code below:

 $("button").click(function() { $("button").css("background-color", "#6ddc5d"); // change color, then run this below operation for (var i = 0; i < 200; i++) console.log(i); // more stuff here }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>lol</button> 

Answer 1

The issue is because the loop you're running is synchronous. This blocks the UI thread from updating the background colour you amend.

To solve this, call the testFunction() within a timeout with 0 delay:

 function testFunction() { for (var i = 0; i < 200; i++) { console.log(i); } return 0; } $("button").click(function() { $("button").css("background-color", "#6ddc5d"); setTimeout(testFunction, 0); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>lol</button> 

The logic for your version without the function is the same, you just need to wrap it in a setInterval() :

 $("button").click(function() { $("button").css("background-color", "#6ddc5d"); setTimeout(function() { for (var i = 0; i < 200; i++) { console.log(i); } }, 0); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>lol</button> 

Answer 2

You could use a worker if you didn't want to use a timeout. This will allow you to run heavy long running loads that take longer than the timeout.

Note 1: This works in all browsers, but seems to work the best in FireFox.
Note 2: Edge complains about the inline script when using createObjectURL , so an external script would be better.

 // Get the worker form an inline script var blob = new Blob([document.querySelector('#worker1').textContent ], { type: "text/javascript" }) // Get the URL to the worker (can use an external file) var worker = new Worker(window.URL.createObjectURL(blob)) // Listen for messages from the worker // When when get one handle it worker.onmessage = function(e) { console.log(e.data) } // Once clicked change the color, then send a message to the worker $("button").click(function() { $("button").css("background-color", "#6ddc5d") worker.postMessage('') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>lol</button> <!-- Place the contents of the below script in an external js file if desired --> <script id="worker1" type="javascript/worker"> // Listen for messages from the main process self.onmessage = function(e) { for (var i = 0; i < 2000; i++) { // Send messages back to the main process self.postMessage(i) } return 0; } </script> 

The above example uses an inline worker, you could replace it with an external .js file if you wanted, you would just need to remove the var blob = ... line and replace window.URL.createObjectURL(blob) with the URL to the file.

Answer 3

I guess you want it to be executed seperately. In this case you need to make it async with let's say setTimeout.

 function testFunction() { for (var i = 0; i < 200; i++) { console.log(i); } return 0; } $("button").click(function() { $("button").css("background-color", "#6ddc5d"); setTimeout(function() { testFunction(); },0); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>lol</button>