comment utiliser q.js promet de travailler avec plusieurs opérations asynchrones

Mes suggestions pour obtenir ce travail à Q. js sont ci-dessous. La clé est que chaque fois que vous voulez faire quelque chose de manière asynchrone, vous devez retourner une promesse, et une fois la tâche terminée, vous devez résoudre cette promesse. Qui permet à l'appelant de la fonction permettant d'écouter de la tâche à effectuer, puis faire autre chose.

Comme avant, j'ai commenté mes changements avec //***. Laissez-moi savoir si vous avez d'autres questions.

        function traverseFiles() {
            //*** Create an array to hold our promises
            var promises = [ ];
            for (var i=0, l=pages.length; i<l; i++) {
                //*** Store the promise returned by getSizeSettingsFromPage in a variable
                promise = getSizeSettingsFromPage(pages[i]);
                promise.then(function(values) {
                    var width = values[0],
                        height = values[1],
                        filename = values[2];
                    //*** When the promise is resolved, call calculateRatio
                    calculateRatio(width, height, filename);
                });
                //*** Add the promise returned by getSizeSettingsFromPage to the array
                promises.push(promise);
            }
            //*** Call checkWhenReady after all promises have been resolved
            Q.all(promises).then(checkWhenReady);
        }

        function getSizeSettingsFromPage(file) {
            //*** Create a Deferred
            var deferred = Q.defer();
            reader = new FileReader();
            reader.onload = function(evt) {
                var image = new Image();
                image.onload = function(evt) {
                    var width = this.width;
                    var height = this.height;
                    var filename = file.name;
                    //*** Resolve the Deferred
                    deferred.resolve([ width, height, filename ]);
                };
                image.src = evt.target.result;
            };
            reader.readAsDataURL(file);
            //*** Return a Promise
            return deferred.promise;
        }

Modifier

defer crée un Différés, qui contient deux parties, une promise et la resolve fonction. Le promise est retourné par getSizeSettingsFromPage. Fondamentalement, le retour d'une promesse est une façon pour fonction de dire "je vais revenir à vous plus tard." Une fois que la fonction est terminée, il est de la tâche (dans ce cas, une fois la image.onload événement a été déclenché) le resolve fonction est utilisée pour régler la promesse. Qui indique à quoi que ce soit en attente sur la promesse que la tâche a été achevée.

Voici un exemple plus simple:

function addAsync(a, b) {
    var deferred = Q.defer();
    //Wait 2 seconds and then add a + b
    setTimeout(function() {
        deferred.resolve(a + b);
    }, 2000);
    return deferred.promise;
}

addAsync(3, 4).then(function(result) {
    console.log(result);
});
//logs 7 after 2 seconds

La addAsync fonction ajoute deux nombres, mais il attend 2 secondes avant de les ajouter. Depuis, il est asynchrone, il renvoie une promesse (deferred.promse) et décide de la promesse, après les 2 secondes d'attente (deferred.resolve). Le then méthode peut être appelée sur une promesse et a adopté une fonction de callback à exécuter après la promesse a été résolu. La fonction de rappel est passé dans la résolution de la valeur de la promesse.

Dans votre cas, nous avons eu un tableau de promesses et nous avons dû attendre pour tous de leur être fait avant l'exécution d'une fonction, nous avons donc utilisé Q. tous les. Voici un exemple:

function addAsync(a, b) {
    var deferred = Q.defer();
    //Wait 2 seconds and then add a + b
    setTimeout(function() {
        deferred.resolve(a + b);
    }, 2000);
    return deferred.promise;
}

Q.all([
    addAsync(1, 1),
    addAsync(2, 2),
    addAsync(3, 3)
]).spread(function(result1, result2, result3) {
    console.log(result1, result2, result3);
});
//logs "2 4 6" after approximately 2 seconds