Блог

может ли javascript предоставлять вложенные очереди?

моя ожидаемая очередь с ajax:

• Загрузить родительский элемент 1
• Загрузить дочерний элемент
• Загрузить дочерний элемент
• Загрузить дочерний элемент
• Выполнено
• Загрузить родительский элемент 2
• Загрузить дочерний элемент
• Загрузить дочерний элемент
• Выполнено

и т.д..

таким образом, следующий родительский элемент будет ждать и выполняться после завершения дочерних элементов предыдущего родительского элемента.

Я попытался сделать это, используя приведенный ниже код:

 var Queue = function(handler) {
    var queue = [];

    var run = function() {
        var callback = function() {
            queue.shift();

            if(queue.length > 0) {
                run();
            }
        }

        handler(queue[0], callback);
    }

    this.append = function(task) {
        queue.push(task);
        if(queue.length === 1) {
            run();
        }
    }
}

var queue = new Queue(function(task, callback) {
    task(function() {
        if(task.callback) {
            task.callback();
        }
        callback();
    });
});
  

И это мой вызов ajax.

 var actionGetImages = function(keywords) {
var getImagesTasks = [];

Object.keys(keywords).forEach(keywordKey => {
    getImagesTasks[keywordKey] = function(getImageCallback) {
        $.ajax({
            type: 'POST',
            url: 'url-get-images',
            data: {
                keyword: keywords[keywordKey].title,
            },
            success: function(data) {
                var contents = JSON.parse(data);
                var getContentTasks = [];

                Object.keys(contents).forEach(contentKey => {
                    getContentTasks[contentKey] = function(getContentCallback) {

                        $.ajax({
                            type: 'POST',
                            url: 'url-get-content',
                            data: {
                                data: JSON.stringify(contents[contentKey])
                            },
                            success: function(data) {
                                getContentCallback();
                            }
                        });
                    }
                });

                for(var i2 = 0; i2 < getContentTasks.length; i2  ) {
                    queue.append(getContentTasks[i2]);
                }

                getImageCallback();
            }
        });
    }
});

for(var i1 = 0; i1 < getImagesTasks.length; i1  ) {
    queue.append(getImagesTasks[i1]);
}
  

}

но результат этого кода не такой, как я ожидал, он будет таким, как показано ниже:

• Загрузить родительский элемент 1
• Загрузить родительский элемент 2
• Загрузить дочерний элемент
• Загрузить дочерний элемент
• Загрузить дочерний элемент
• Выполнено
• Загрузить дочерний элемент
• Загрузить дочерний элемент
• Выполнено