Why doesn't Progress Bar dynamically change unlike Text?

Question

I\'m dynamically updating a few elements after a setTimeout() function. The jQuery function .text() seems to dynamically update with each change of ind

Answer 1

If you really need the delay to be zero for the calculations then I would separate the calculations and the setting of the progress bar value so that you are calculating the value in one setInterval, and then run a separate setInterval that updates the bar every 100 ms to this value.

This way your calculations are up to date and your UI has time it needs to update as well.

If you want them both in the same method then I think you need to add a minimum 100 ms delay.

Example: https://jsfiddle.net/dk7g51g4/3/

Javascript:

var _ValueToSet = 0;
$(document).ready(function () {

    // SET VALUE EXTREMELY FAST (your current code)
     setInterval(function () {
        _ValueToSet = Math.round(Math.random() * 100); // get value we are going to set
    }
    , 0); // run as fast as possible

    // RUN UI UPDATE AT 100MS (separate thread for ui updates).
    setInterval(function () {
        setRandom()
    }
    , 100); // give ui 100ms to do its thing
});

function setRandom() {
    var elem = $('.progress-bar'); // what is our target progress bar

    // set both style width and aria-valuenow
    elem.css('width', _ValueToSet + '%');
    elem.attr('aria-valuenow', _ValueToSet);
}

HTML: