Customized progress bar for monitoring lengthy JavaScript calculations

Question

Customized progress bar for monitoring lengthy JavaScript calculations

I am currently working on a project that involves using javascript with jquery and bootstrap. My main objective is to have a visually appealing progress bar displayed during heavy javascript computation. Despite knowing the exact progress state of the computation, I am facing an issue where CSS is not updating dynamically during the calculation process.

Although WebWorker is an option for some, it does not fit my specific requirements as I need to interact with a model in the main thread that cannot be easily copied or cloned to a worker.

For instance, currently the progress bar is only updated at the end of the computation. However, my goal is to have it update continuously throughout the process.

http://jsfiddle.net/K48B2/

Here is a snippet of the HTML code:

<div class="progress">
    <div id="loading" class="bar progress-bar progress-bar-info" style="width: 0%"></div>
</div>

And here is the corresponding javascript code:

for (var i = 0; i <= 10; i++) {
    $('#loading').css('width', i * 10 + '%');
    heavycomputation();
};

javascript css progress-bar

Answer 1

Answer №1

Jack shared this innovative solution that effectively... jsfiddle.net/nNZCE

function heavyProcessing(time, progress) {
    var startDate = new Date();
    var currentDate = null;
    do {
        currentDate = new Date();
    }
    while (currentDate - startDate < time);

    if (progress > 10)
        return;

    setTimeout(function() {
        console.log(progress);
        $('#loading').css('width', progress * 10 + '%');
        heavyProcessing(200, ++progress);
    }, 200);
}

heavyProcessing(200, 0);

Answer 2

Jack shared this innovative solution that effectively... jsfiddle.net/nNZCE

function heavyProcessing(time, progress) {
    var startDate = new Date();
    var currentDate = null;
    do {
        currentDate = new Date();
    }
    while (currentDate - startDate < time);

    if (progress > 10)
        return;

    setTimeout(function() {
        console.log(progress);
        $('#loading').css('width', progress * 10 + '%');
        heavyProcessing(200, ++progress);
    }, 200);
}

heavyProcessing(200, 0);

Answer 3

Answer №2

Does this align more closely with your requirements?

function timeIntenseOperation(millis) {
    var date = new Date();
    var currentDate = null;
    do {
        currentDate = new Date();
    }
    while (currentDate - date < millis);
}

$(function() {
    for (var index = 0; index <= 100; index++) {
        setTimeout(function (index) {
           return function() {
                $('#loading').css('width', index + '%');
                $('#value').html(index + '%');
                console.log(index + '%');
                timeIntenseOperation(200);               
           }
        }(index), index * 200);  
    }    
});

Answer 4

Does this align more closely with your requirements?

function timeIntenseOperation(millis) {
    var date = new Date();
    var currentDate = null;
    do {
        currentDate = new Date();
    }
    while (currentDate - date < millis);
}

$(function() {
    for (var index = 0; index <= 100; index++) {
        setTimeout(function (index) {
           return function() {
                $('#loading').css('width', index + '%');
                $('#value').html(index + '%');
                console.log(index + '%');
                timeIntenseOperation(200);               
           }
        }(index), index * 200);  
    }    
});

Customized progress bar for monitoring lengthy JavaScript calculations

Answer №1

Answer №2

Similar questions

Only apply prevent default on specific levels for better control

"Vanishing Act: Title Toggle Disappears with a

Challenges with implementing speech recognition within a React component's state

Retrieve the element that was clicked by targeting its class name using JavaScript

Error in Displaying Vuetify Child Router View

Should URL parameters be avoided as a method for retrieving data with React Router in a React application?

Fluid active tabs are causing alignment issues with CSS triangles

Stylish tag colors in ExtJS 3 SuperBoxSelect

Optimizing React components by efficiently updating props without triggering unnecessary renders

Verifying whether the file is an HTML image file type

Adding an element to the second-to-last position in a list

Disable the checkbox functionality in Angular

Consolidate all data connected to the specified key from a JSON dataset

Is there a way to alphabetically sort V-Chips in Vuetify?

Upon refreshing the datatable, I encountered a issue where the checkbox cannot be selected

Having trouble figuring out how to make my Bootstrap Navbar more responsive

Toggle the frequently asked questions feature by including a selector

Exploring the method of dynamically adding a row to a table on button click using Angular 2

Can we stop a specific container from resizing on mobile devices?

Unable to connect Dropzone to dynamically loaded DIV using AJAX