(function (d, w, undefined) { d.querySelector('#xrunner').addEventListener('click', dorun); var print = Helpers.printDirect ,clrscr = Helpers.logClear function dorun(e) { var origin = e.target || e.srcElement ,method = origin.getAttribute('data-run'); if (method) { ({ updateSync: updateSync, updateAsync: updateAsync })[method](); } function updateSync() { clrscr(); print('<b>Queuing log</b>:'); for (var i = 0; i < 20; i+=1) { var fn = function() { print('<code>d.getElementById(\'output\').innerHTML = i</code>', ' queued'); d.getElementById('output').innerHTML = i; }; setTimeout(fn,20); print('<code>setTimeout</code> queued'); } } function updateAsync() { var i = 0; clrscr(); print('<b>Queuing log</b>:'); function updateLater() { d.getElementById('output').innerHTML = (i++); print('<code>d.getElementById(\'output\').innerHTML = i</code>',' queued'); if (i < 100) { setTimeout(updateLater, 20); print('<code>setTimeout</code> queued'); } } updateLater(); } } }(document, window))
<div class="solink" data-linkid="26380086"></div> <div id = "xrunner" class="row btn_area"> <button class="btn btn-info" data-run="updateSync">Run Sync</button> <button class="btn btn-info" data-run="updateAsync">Run Async</button> <span class="label label-info pull-right" style="display:block;" id="output"></span> </div>
#warning { color: red; font-weight: bold; } .hidden { visibility: collapse; }