invoking a function with a callback within a loop

Question

invoking a function with a callback within a loop

I need to execute

window.resolveLocalFileSystemURI(file,success,fail)

within a for loop where different file entries are passed. The goal is to only return the resolved entries in an array once all entries have been successfully retrieved.

function resolveFiles(result,callback)
{
    var resultData=[];
    window.resolveLocalFileSystemURI(result, function(entry)
    {
        resolvedGalleryImages.push(entry);

        callback(resolvedGalleryImages);
        resolvedGalleryImages=[];

    }, function(e)
    {
        alert("err"+e);}); 
}

//calling--
//@filesarr contains URIs of captured images
for(i = 0; i < filesarr.length; i++)
{
    resolveFiles(filesarr[i],function(result){
        var resultArr = result;
    });
}

What steps can I take to ensure that the callback is not triggered before all entries have been obtained?

javascript jquery-callback

Answer 1

Answer №1

When faced with a problem like this, there are several approaches you can take:

Manually code an asynchronous loop
Utilize promises to synchronize multiple async operations
Employ a library such as Async to manage multiple async operations

Here is the manual approach:

function getFiles(filesarr, doneCallback) {
    var results = new Array(filesarr.length);
    var errors = new Array(filesarr.length);
    var errorCnt = 0;
    var overallCnt = 0;

    function checkDone() {
        if (overallCnt === filesarr.length) {
            if (errorCount) {
                doneCallback(errors, results);
            } else {
                doneCallback(null, results);
            }
        }
    }

    for (var i = 0; i < filesarr.length; i++) {
        (function(index) {
            window.resolveLocalFileSystemURI(url, function (entry) {
                results[index] = entry;
                ++overallCnt;
                checkDone();
            }, function (e) {
                errors[index] = e;
                ++errorCount;
                ++overallCnt;
                checkDone();
            });
        })(i);
    }
}

getFiles(filesarr, function(errArray, results) {
    if (errArray) {
        // handle errors here
    } else {
        // process results
    }
});

And here's an implementation using ES6 promises:

// create a promisified function
function resolveFile(url) {
    return new Promise(function(resolve, reject) {
        window.resolveLocalFileSystemURI(url, resolve, reject);
    });
}

function getFiles(filesarr) {
    var promises = [];
    for (var i = 0; i < filesarr.length; i++) {
        promises.push(resolveFile(filesarr[i]));
    }
    return Promise.all(promises);
}

getFiles(filesarr).then(function(results) {
    // process results here
}, function(err) {
    // handle error here
});

Answer 2

When faced with a problem like this, there are several approaches you can take:

Manually code an asynchronous loop
Utilize promises to synchronize multiple async operations
Employ a library such as Async to manage multiple async operations

Here is the manual approach:

function getFiles(filesarr, doneCallback) {
    var results = new Array(filesarr.length);
    var errors = new Array(filesarr.length);
    var errorCnt = 0;
    var overallCnt = 0;

    function checkDone() {
        if (overallCnt === filesarr.length) {
            if (errorCount) {
                doneCallback(errors, results);
            } else {
                doneCallback(null, results);
            }
        }
    }

    for (var i = 0; i < filesarr.length; i++) {
        (function(index) {
            window.resolveLocalFileSystemURI(url, function (entry) {
                results[index] = entry;
                ++overallCnt;
                checkDone();
            }, function (e) {
                errors[index] = e;
                ++errorCount;
                ++overallCnt;
                checkDone();
            });
        })(i);
    }
}

getFiles(filesarr, function(errArray, results) {
    if (errArray) {
        // handle errors here
    } else {
        // process results
    }
});

And here's an implementation using ES6 promises:

// create a promisified function
function resolveFile(url) {
    return new Promise(function(resolve, reject) {
        window.resolveLocalFileSystemURI(url, resolve, reject);
    });
}

function getFiles(filesarr) {
    var promises = [];
    for (var i = 0; i < filesarr.length; i++) {
        promises.push(resolveFile(filesarr[i]));
    }
    return Promise.all(promises);
}

getFiles(filesarr).then(function(results) {
    // process results here
}, function(err) {
    // handle error here
});

Answer 3

Answer №2

Assuming all your functions are synchronous, if they're not, please specify the tool you're using (note that jQuery is not used in this code snippet despite the tags).

function getFile(path) {
    var content;
    window.getFileContent(path, function(file) {
        content = file;
    });
    return content;
}
var filesContent = fileArray.map(getFile);
callbackFunction(filesContent);

Answer 4

Assuming all your functions are synchronous, if they're not, please specify the tool you're using (note that jQuery is not used in this code snippet despite the tags).

function getFile(path) {
    var content;
    window.getFileContent(path, function(file) {
        content = file;
    });
    return content;
}
var filesContent = fileArray.map(getFile);
callbackFunction(filesContent);

invoking a function with a callback within a loop

Answer №1

Answer №2

Similar questions

Searching with Jquery Ajax

Using JavaScript to grab an entire div containing an SVG element

How can I load only specific images on a webpage using HTML?

Difficulties in Configuring Testacular Integration with Jasmine and Angular

Utilizing ES6 array methods to convert multidimensional arrays into chart-ready data

Searching in Vue based on the selected option is only possible by the selected criteria and not by id, regardless of the

The direction to the Excel document for conversion into JSON

One Background Image Serving Multiple Divs

When attempting to navigate to a different page in Next.js, the Cypress visit functionality may not function as

What is the best way to keep calling an AJAX function until it receives a response from a previous AJAX call

Running multiple web applications with different base directories on a single Express server

Issue with AngularJS ui-router failing to resolve a service call

Customize Input Values by Selecting an Option with jQuery-UI Autocomplete

Using location.reload with the argument of true is no longer recommended

Unlocking Extended Functionality in JQuery Plugins

Adding extra information to a property or array in Firebase

Learn how to create a "generated" texture coordinate in three.js similar to how it is done in Blender Cycles

Strategies for handling numerous node projects efficiently?

Rails not receiving JSON data

A script in PHP or JavaScript that dynamically generates two dual drop-down menus to assist with data selection