在调用 ajax 函数之前等待复杂函数完成（使用多个 ajax 调用）答案

【问题标题】：Wait for complex function to finish (with multiple ajax calls) before calling ajax function在调用 ajax 函数之前等待复杂函数完成（使用多个 ajax 调用）
【发布时间】：2020-09-17 15:55:52
【问题描述】：

请耐心等待，我会尽可能清楚地解释问题。

从最简单的任务开始，我的第一个任务是调用这个 create() 函数，其中包含 2 个 ajax 调用

 popup().create('Zip code is required to add product to cart')

create: function (popupTitle) {
                let self = this;
                let options = {
                    type: 'popup',
                    responsive: true,
                    modalClass: 'zip-modal',
                    title: popupTitle,
                    buttons: [{
                        text: $.mage.__('Apply'),
                        class: 'action primary',
                        click: function () {
                            if (self.validateZip(self.zipForm)) {
                               ----------> self.getCatalog(); ------------<
                                this.closeModal()
                            }
                        }
                    }],

                    closed: function () {
                        if (self.zipInput.val() === '') {
                            $.cookie('zip_code_set', 'not_set', {path: '/'})
                            self.lightbox.show();
                        }
                    }
                };
                modal(options, this.popup);
                this.popup.modal('openModal');
            
        },

第一个存在。指定 getCatalog() 函数

        getCatalog: function () {
            let self = this;
            let value = this.zipInput.val();

            fullScreenLoader.startLoader();

            storage.post(
                url.build('rest/V1/zip/getCatalog'),
                JSON.stringify({
                    zipCode: value
                }),
                true,
                'application/json'
            ).done(
                function (response) {
                    ---------> self.validateCatalog(); -----------<
                    fullScreenLoader.stopLoader();
                },
            )
        },

创建一个 ajax 发布请求，并且在它的 .done() 函数中还有另一个函数执行另一个 ajax 获取请求

        validateCatalog: function () {
            fullScreenLoader.startLoader();

            storage.get(
                url.build('rest/V1/zip/getCategory'),
            ).done(
                function (response) {
                    customerData.set('categoryMenu', response[0].categoryMenu);
                    fullScreenLoader.stopLoader();
                    // window.location.reload();
                },
            )
        },

事情是毕竟这基本上发生在 create() 函数之后，我必须调用另一个执行 ajax 请求的函数，但它必须等待所有这个 create() 函数完成然后才触发，我发现的方式这可能实现看起来像 $.Deferred 和回调，但我也无法让它工作，在每次尝试中，它总是在 create() 函数完成所有它的 ajax 之前用 ajax 请求触发这个函数要求。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery ajax deferred

【解决方案1】：

作为评论可能会更好，但我还没有足够的代表来制作 cmets。

可能有一种更有效的方法，但我能想到的最简单的方法是使用一个布尔变量，当最终的 ajax 调用完成时设置为 true，并且只需要一个间隔来检查值......类似于：

bAllDone = false;
// In final ajax .done
bAllDone = true;

callCreate = setInterval(function(){
   if(bAllDone){
      clearInterval(callCreate);
      create()
   }
},100);

【讨论】：