Promises - Freezing the UI

by wimpyprogrammer

HTML

<button id="doWork">Do Work!</button><span id="status"></span>
<div style="height: 200px; background-color: red"></div>
<div style="height: 200px; background-color: orange"></div>
<div style="height: 200px; background-color: yellow"></div>
<div style="height: 200px; background-color: green"></div>
<div style="height: 200px; background-color: blue"></div>
<div style="height: 200px; background-color: indigo"></div>
<div style="height: 200px; background-color: violet"></div>
<div style="height: 200px; background-color: indigo"></div>
<div style="height: 200px; background-color: blue"></div>
<div style="height: 200px; background-color: green"></div>
<div style="height: 200px; background-color: yellow"></div>
<div style="height: 200px; background-color: orange"></div>
<div style="height: 200px; background-color: red"></div>
<div style="height: 200px; background-color: orange"></div>
<div style="height: 200px; background-color: yellow"></div>
<div style="height: 200px; background-color: green"></div>
<div style="height: 200px; background-color: blue"></div>
<div style="height: 200px; background-color: indigo"></div>
<div style="height: 200px; background-color: violet"></div>
<div style="height: 200px; background-color: indigo"></div>
<div style="height: 200px; background-color: blue"></div>
<div style="height: 200px; background-color: green"></div>
<div style="height: 200px; background-color: yellow"></div>
<div style="height: 200px; background-color: orange"></div>
<div style="height: 200px; background-color: red"></div>
<div style="height: 200px; background-color: orange"></div>
<div style="height: 200px; background-color: yellow"></div>
<div style="height: 200px; background-color: green"></div>
<div style="height: 200px; background-color: blue"></div>
<div style="height: 200px; background-color: indigo"></div>
<div style="height: 200px; background-color: violet"></div>
<div style="height: 200px; background-color: indigo"></div>
<div style="height: 200px;...

JavaScript

var status = document.getElementById('status');

document.getElementById('doWork').onclick = function() {
	status.innerHTML = 'Starting work...';
	for (var i = 0; i < 5000000000; i++) {}
  status.innerHTML = 'Work complete.';
}