Tacking the progress bar onto an array of $.ajax() calls within a Promise.all

Question

Tacking the progress bar onto an array of $.ajax() calls within a Promise.all

FINAL UPDATE 25/06/20: After a thorough investigation, I discovered the root causes of why the progress bar was not functioning as intended. Firstly, dealing with $.ajax() proved to be cumbersome due to its lack of proper promise handling. To resolve this issue, I switched to using AXIOS for making the calls, which significantly improved the situation.

It became evident that I was making numerous calls throughout the process. Initially, I believed that the initial calls were minimal and not affecting the loading time before the bar fills up. However, upon analyzing the network traffic, it turned out that the preparation call was actually the most time-consuming. As a workaround, I modified the progress bar to fill up twice: once for the "preparation call" and then again for the actual request calls.

I appreciate all the advice provided by others, as it guided me in identifying where I had gone wrong!

UPDATE 25/06/20: For those interested, here is a link to the complete function on Gist since it is too lengthy to include here: Function in Gist. Line 215 contains the addition of the $.ajax() calls to matchPromises, while line 274 depicts where Promise.allSettled(matchPromises) is called.

Implementing a functional progress bar has been quite challenging for me during this project. While I won't share the entire code due to its length, I will provide a summary.

The ajax calls are structured like this:

$.ajax({
    "url": myUrl,
    "method": "POST",
    "success": (data) => {
        doStuff
        // POINT A
     },
     "error": (data) => {
         doStuff
     }
})

These calls are stored in an array named matchPromises, and then I utilize

Promise.allSettled(matchPromises)

successfully.

The challenge lies in updating a progress bar to indicate the completion status of promises. At the beginning of the function, I define the following:

let currentProgress = 0;
let maxProgress = 0;

function displayProgress() {
    currentProgress++;
    let calculatedWidth = (currentProgress / maxProgress) * 100;
    $('#progressBar').width(`${calculatedWidth}%`);
    $('#progressBar').attr('aria-valuenow', currentProgress);
}

Right before calling

Promise.allSettled(matchPromises)

, I update maxProgress using matchPromises.length.

I attempted inserting displayProgress() within the success section of the $.ajax calls, but faced the issue of maxProgress always reverting to 0 each time it's triggered.

Various efforts were made to promisify the $.ajax calls by encapsulating them in a new Promise and adding .then(), yet this resulted in execution only after Promise.allSettled had completed its execution.

This dilemma has consumed hours of my time, experimenting with different approaches. Any assistance from knowledgeable individuals would be greatly appreciated, as I am at a loss for solutions.

javascript jquery ajax promise progress-bar

Answer 1

Answer №1

As the code is not fully provided for your specific scenario, I have attempted to create a solution that may be helpful.

I trust that this resolves your issue or at least sparks some inspiration.

const getLongRunningPromise = (milliseconds, value) => {
    return new Promise((resolve) => {
        setTimeout(() => resolve(value), milliseconds)
    });
};

const promises = [getLongRunningPromise(5000, 'a'), getLongRunningPromise(1000, 'b')];

let doneCount = 0;
const overallCount = promises.length;

const handleProgress = (result) => {
    doneCount++;
    const percentageDone = doneCount/overallCount*100;
    console.log(`${percentageDone}% Done`);
    return result;
};

Promise.all(promises.map(p => p.then(handleProgress))).then((results) => console.log('results', results));

Answer 2

As the code is not fully provided for your specific scenario, I have attempted to create a solution that may be helpful.

I trust that this resolves your issue or at least sparks some inspiration.

const getLongRunningPromise = (milliseconds, value) => {
    return new Promise((resolve) => {
        setTimeout(() => resolve(value), milliseconds)
    });
};

const promises = [getLongRunningPromise(5000, 'a'), getLongRunningPromise(1000, 'b')];

let doneCount = 0;
const overallCount = promises.length;

const handleProgress = (result) => {
    doneCount++;
    const percentageDone = doneCount/overallCount*100;
    console.log(`${percentageDone}% Done`);
    return result;
};

Promise.all(promises.map(p => p.then(handleProgress))).then((results) => console.log('results', results));

Answer 3

Answer №2

Suppose you have a function named foo(). You can implement it like this:

function foo() {
    let currentProgress = 0;
    let someArray = .......;
    let matchPromises = someArray.map(function(myUrl) {
        return $.ajax({
            'url': myUrl,
            'method': 'POST',
            'success': (data) => {
                // doStuff
             },
             'error': (jqXHR, textStatus, errorThrown) => {
                // doStuff
             }
        })
        .always(function() {
            displayProgress(++currentProgress, matchPromises.length);
        });
    });
    Promise.allSettled(matchPromises).then(...); 
}

function displayProgress(current, max) {
    let calculatedWidth = (current / max) * 100;
    $('#progressBar').width(`${calculatedWidth}%`).attr('aria-valuenow', current);
}

Therefore, currentProgress is an internal variable of foo(), and there's no need to assign maxProgress; it's simply matchPromises.length.

If displayProgress() is not used elsewhere, it could also be defined within foo() or the two lines of code inside the .always() callback.

Answer 4

Suppose you have a function named foo(). You can implement it like this:

function foo() {
    let currentProgress = 0;
    let someArray = .......;
    let matchPromises = someArray.map(function(myUrl) {
        return $.ajax({
            'url': myUrl,
            'method': 'POST',
            'success': (data) => {
                // doStuff
             },
             'error': (jqXHR, textStatus, errorThrown) => {
                // doStuff
             }
        })
        .always(function() {
            displayProgress(++currentProgress, matchPromises.length);
        });
    });
    Promise.allSettled(matchPromises).then(...); 
}

function displayProgress(current, max) {
    let calculatedWidth = (current / max) * 100;
    $('#progressBar').width(`${calculatedWidth}%`).attr('aria-valuenow', current);
}

Therefore, currentProgress is an internal variable of foo(), and there's no need to assign maxProgress; it's simply matchPromises.length.

If displayProgress() is not used elsewhere, it could also be defined within foo() or the two lines of code inside the .always() callback.

Tacking the progress bar onto an array of $.ajax() calls within a Promise.all

Answer №1

Answer №2

Similar questions

Unresolved promise: Internal server issue

Please submit the form to log in with your credentials

Connect the scroll wheel and then proceed to scroll in the usual way

Display only specific PHP-encoded JSON data in a formatted table

Verify if any choices are available before displaying the div block

Exploring the power of Typescript functions within a traditional VueJS project

The render() method in a class does not support Jquery functionality, unlike the componentDidMount() method where it works effectively

NodeJS controller function to generate and send a response

Verify whether the element retains the mouseenter event after a specified delay

"Encountered a TypeError: Cannot read property 'params

Displaying the format when entering a value with react-number-format

Leveraging generics within TypeScript

What is the technique for performing asynchronous querying of multiple SQL databases?

Building a custom HTML and JavaScript player to showcase multiple videos on a webpage

Deactivate filtering for the column in the header, while retaining it in the toolbar

What is the best way to transfer data between functions?

Implementing dynamic components in Vuejs by passing props from objects

The perplexing simplicity of closure

Best practice for incorporating Bootstrap into Webpack

Incorporating the non-typescript npm package "pondjs" into Meteor applications using typescript files