JSFiddle - React, Tailwind, and code Playground

by jason zhong

HTML

<script>
     
     	function updateSync1() {
		    for (var i = 0; i < 1000; i++) {
		        document.getElementById('output').innerHTML = i;
		    }
		}
    
    	function updateSync2() {
		    for (var i = 0; i < 1000; i++) {
		        setTimeout(document.getElementById('output').innerHTML = i,0);
		    }
		}

		function updateAsync() {
		    var i = 0;

		    function updateLater() {
		        document.getElementById('output').innerHTML = (i++);
		        if (i < 1000) {
		            setTimeout(updateLater, 0);
		        }
		    }

		    updateLater();
		}
</script>

<div class="row btn_area">
				<button class="btn btn-info" onclick="updateSync1()">Run Sync 1</button>
    <button class="btn btn-info" onclick="updateSync2()">Run Sync 2</button>
				<button class="btn btn-info" onclick="updateAsync()">Run Async</button>
				<span class="label label-info pull-right" style="display:block;" id="output"></span>
			</div>