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

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 2

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 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>