Doing work with setTimeout

by fiddlegrimbo

HTML

<div class="container">
    <div id="f0"></div>
    <div id="f1"></div>
    <div id="f2"></div>
    <div id="f3"></div>
    <div id="f4"></div>
    <div id="f5"></div>
    <div id="f6"></div>
</div>
<button id="testWithTimeout">Test with timeout</button>
<button id="testWithoutTimeout">Test without timeout</button>

JavaScript

$(".container div").on("change", function (evt) {
    $(this).html("changed-" + evt);
});

function dispatch(field, i) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    field.selectedIndex = i;
    field.dispatchEvent(evt);
}

function doWork(field, i) {
    // simulate 500 ms of work
    var workTimeInMs = 500;
    var time = new Date().getTime();
    while (new Date().getTime() - time < workTimeInMs) {
    }
    dispatch(field, i);
}

function test(useTimeout) {
    // arbitrary limit of 100, but we stop when we don't find a field
    var field,
        i = 0;
    while (field = $("#f" + (i++))[0]) {
        if (useTimeout) {
            setTimeout(doWork.bind(this, field, i), 50);
        } else {
            doWork(field, i);
        }
    }
}

$("#testWithTimeout").click(function (evt) {
    $(".container div").empty();
    setTimeout(test.bind(window, true), 50);
});
$("#testWithoutTimeout").click(function (evt) {
    $(".container div").empty();
    setTimeout(test.bind(window, false), 50);
});