Как я могу заставить мои функции setTimout работать с той же скоростью?

Предисловие: У меня есть демонстрация проблемы на моем личном сайте (надеюсь, это нормально. Если нет) , Могу попробовать настроить на jsfiddle). Я хочу, чтобы этот вопрос был немного забавным, а также пытаюсь понять, сколько времени уходит на функции javascript.

Я увеличиваю значение индикаторов выполнения по истечении времени ожидания. В идеале (если функции выполняются мгновенно) они должны заполняться с одинаковой скоростью, но в реальном мире этого не происходит. Код такой:

function setProgress(bar, myPer) {
bar.progressbar({ value: myPer })
    .children('.ui-progressbar-value')
        .html(myPer.toPrecision(3) + '%')
            .attr('align', 'center');
    myPer++;
    if(myPer == 100) { myPer = 0; }
 }

 function moveProgress(bar, myPer, inc, delay){
    setProgress(bar, myPer);
    if(myPer >= 100) { myPer = 0; }
    setTimeout(function() { moveProgress(bar, myPer+inc, inc, delay); }, delay);
 }

 $(function() { 
   moveProgress($(".progressBar#bar1"), 0, 1, 500);
   moveProgress($(".progressBar#bar2"), 0, 1, 500);
   moveProgress($(".progressBar#bar3"), 0, .1, 50);
   moveProgress($(".progressBar#bar4"), 0, .01, 5);             
 });

Наивно, можно было бы подумать, что все должны работать (заполнять индикатор выполнения) с одинаковой скоростью.

Однако в первых двух полосах (если мы называем «установку индикатора выполнения» одной операцией) я выполняю одну операцию каждые 500 мс, всего 500 операций для заполнения полосы; в третьем я выполняю одну операцию каждые 50 мс, в общей сложности 5000 операций для заполнения шкалы; в четвертом я выполняю одну операцию каждые 5 мс, в общей сложности 50 000 операций для заполнения шкалы.

Какая часть моего кода занимает больше всего времени, вызывает эти различия в скорости и может быть изменена, чтобы заставить их функционировать так же, как и они (четвертая полоса получает меньшие приращения), но также работает на такая же скорость?