Traffic lights in Javascript

Asked

Viewed 672 times

0

How can I create traffic lights in Javascript? I have an asynchronous script that runs n times, I wish that when the n tasks had another task been executed. I used normal access to a variable but this can cause race condition. Code Promise:

var load_thumbs_promise = new Promise(function (resolve, reject) {
            var itens_id = formData.get('items_id');
            itens_id = itens_id.split(",");
            itens_id.forEach(function (item, index) {
                if(formData.get("type_" + item) == 'pdf')
                {
                    var pdf_url = formData.get("pdf_url_" + item);

                    PDFJS.getDocument(pdf_url).promise.then(function (doc) {
                        var page = [];
                        page.push(1);//Get first page

                        return Promise.all(page.map(function (num) {
                            return doc.getPage(num).then(makeThumb)
                                .then(function (canvas) {
                                    var img = canvas.toDataURL("image/png");

                                    formData.append("pdf_thumb_" + item, img);
                                    console.log(index);

                                    if(index == itens_id.length - 1)
                                    {
                                        console.log("d");
                                        resolve("It's done");
                                    }
                                });
                        }));
                    });
                }
            });
        });

How can I solve this problem?

javascript async promises traffic-light

  • In question you have "would like when n tasks finish another task to be performed", and that’s what Promise.all does, and what are you using. What part does not work?

  • The idea is to perform another task, also asynchronous, when all the tasks performed by load_thumbs_promise ended.

  • You could use a Promise.all where you make a map instead of itens_id.forEach and then return PDFJS.getDocument..., I think that would be that way. You’ve tested that?

  • I’m not used to using Precedents, I think I don’t quite understand what you suggested but I will search. Thank you.

  • I will give an answer with a suggestion, as I do not know what this code does risk some bugs, but I think it will help.

1 answer

2


Change that forEach for a .map that returns a trial, so you have a trial for each Promise.all. Then you use that var itemsFetcher = itens_id.map(function(item, index) { that I put in the example to know when all the Promises and sub Prefis have solved.

var itens_id = formData.get('items_id');
itens_id = itens_id.split(",");
var itemsFetcher = itens_id.map(function(item, index) {
  if (formData.get("type_" + item) == 'pdf') {
    var pdf_url = formData.get("pdf_url_" + item);
    return new Promise(function(resolve, reject) {
        PDFJS.getDocument(pdf_url).promise.then(function(doc) {
          var page = [];
          page.push(1); //Get first page

          return Promise.all(page.map(function(num) {
            return doc.getPage(num).then(makeThumb)
              .then(function(canvas) {
                var img = canvas.toDataURL("image/png");

                formData.append("pdf_thumb_" + item, img);
                console.log(index);

                if (index == itens_id.length - 1) {
                  console.log("d");
                  resolve("It's done");
                }
              });
          }));
        });
      }
    });
});

Promise.all(itemsFetcher).then(res => console.log(res));

  • It helped a lot, thank you.

Browser other questions tagged javascript async promises traffic-light

You are not signed in. Login or sign up in order to post.