Promise in while loop javascript

Question

I'm trying to generalize a script that encrypts forms using OpenPGP libraries. I got some troubles with the client-side code (Javascript) :

var working = formID.elements[0];
var counter = 0;

while (working) {
    encrypt(working.value).then(function(encrypted_msg) {
        console.log("processing");
        working.value = encrypted_msg;
    });
    console.log("assuming processed");
    var counter = counter + 1;
    var working = formID.elements[counter];
}

The following code should take each form element and encrypt its value. However, the while loop doesn't wait for the asynchronous encrypt() function to be resolved.

I think i need to use promises in this case, but i have no idea how and the few tutorials didn't work in a while loop.

Help ?

are you using any framework angular/react for frontend or pure javascript? — Akash Bhandwalkar
– Akash Bhandwalkar, Commented Sep 28, 2016 at 16:51
You can use recursive function also. Like call function on success of first asynchronus call — Akash Bhandwalkar
– Akash Bhandwalkar, Commented Sep 28, 2016 at 16:58
@Square, is the next form element encryption dependent on the previous? — Max Koretskyi
– Max Koretskyi, Commented Sep 28, 2016 at 17:03

IStranger · Accepted Answer · 2016-09-29 06:06:28Z

2

Probably can be used list of jQuery deferreds, something like this:

var deferreds = [];

$.each(formID.elements, function(key, working){

    var deferred = $.Deferred();
    deferreds.push(deferred);

    encrypt(working.value).then(function(encrypted_msg) {
        console.log("processing");
        working.value = encrypted_msg;
        deferred.resolve();
    });

});

$.when.apply( $, deferreds ).done(function(){
    console.log( 'after all encryptions!' );
});

Of course, can be used native Promise object instead $.Deferred, however I think $.Deferred is more cross-browser way.

UPD2:

Improved answer based on native Promise and Promise.resolve() (thanks to @Bergi). For the case when encrypt() returns correct promise, method Promise.resolve() can be skipped.

var promises = [];

$.each(formID.elements, function(key, working){

    var promise = Promise.resolve(encrypt(working.value))
        .then(function(encrypted_msg) {
            console.log("processing");
            working.value = encrypted_msg;
        });

    promises.push(promise);

});

Promise.all(promises).then(function(){
    console.log( 'after all encryptions!' );
});

edited Sep 29, 2016 at 6:06

answered Sep 28, 2016 at 17:16

IStranger

2,08119 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bergi Over a year ago

In theory, yes, but avoid the deferred antipattern!

IStranger Over a year ago

@Bergi Yes, it is bad practice to create excess deferreds/promices. But I don't know what object returns encrypt method and how it will work with $.when() or Promise.all(). The fact that this object contains .then method, not much to say about him. I updated answer without antipattern.

Bergi Over a year ago

@IStranger If you don't know what it returns, you can always use Promise.resolve(encrypt(…)) (or $.when(encrypt(…)) in jQuery), that's what they are for.

IStranger Over a year ago

@Bergi Thanks, it is awesome method). I like similar methods that allows to unify type without if statements and additional abstract layers. I improved answer using it.

Bergi · Accepted Answer · 2016-09-28 17:36:47Z

1

var iterator = [];
for (var counter = 0; counter < formID.elements.length; counter++) {
    var working = formID.elements[counter];
    iterator.push(encrypt(working.value));
}

Promise.all(iterator)
.then(fumction(data){
    //Here you have all data
})

You can synchronize your operation like this way. By collecting all asynchronus value references and point to them when they have data.

In case your data is dependent.

function myfunction(previousValue){
    if(breaking Condition){
        return Promise.resolve();
    }
    return encrypt(working.value).then(function(encrypted_msg) {
        working.value = encrypted_msg;
        return myfunction(working);
    });
}

edited Sep 28, 2016 at 17:36

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Sep 28, 2016 at 16:55

Akash Bhandwalkar

8915 silver badges19 bronze badges

2 Comments

Gaby Over a year ago

One problem tho, I need to pass the working var to the iterator too. How can i achieve that ?

Gaby Over a year ago

Had an error, undefined working var. Still trying to make it work, tho.

Collectives™ on Stack Overflow

Promise in while loop javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related