setTimeout/setInterval experiment involving slow-downs

setTimeout vs. setInterval experiment involving slow-downs.

<!DOCTYPE html>
<meta charset="utf-8">
<body>

<select id="selectMethod">
    <option selected></option>
    <option>setTimeout</option>
    <option>setInterval</option>
</select>

<label><input type="checkbox" id="cbSlowDown">Make function execution take longer than time for a tick</label>

<p>Counter: <span id="counter">0</span></p>

const TIME = 500;
const SLOWDOWN_RATE = 2;

var setIntervalCounter = d3.select("#counter");

var count = 0.0;
var ts = Date.now();
var slowDown = false;
var timer;

function tick() {
    setIntervalCounter.text(count += .5);
    while (slowDown && (ts + TIME * SLOWDOWN_RATE) > Date.now());
    ts = Date.now();
}

function changeMethod(method) {

clearTimeout(timer);

switch (method) {
    
        case "setTimeout":
        
            timer = window.setTimeout(function fun() {
                tick();
                timer = window.setTimeout(fun, TIME);
            }, TIME);
        
            break;
        
        case "setInterval":
        
            timer = window.setInterval(tick, TIME);
            
            break;
    }
}

d3.select("#selectMethod").on("change", function () {
    changeMethod(this.value);
});

d3.select("#cbSlowDown").on("change", function () {
    slowDown = this.checked;
});

</script>
</body>

https://d3js.org/d3.v4.min.js