我怎样才能等待外部文件功能完成然后在 main 上继续？

Question

我有 main.js 和 load.js，在 load.js 中有 2 个关键函数，getData 是一个 AJAX post 调用和 constHTML 追加基于从 AJAX 调用返回的 JSON 数组的数据。此数据附加到 div，当我在 main.js 上调用 carousel() 时，它将成为轮播滑块，因此，重要的是在 carousel() 函数之前附加数据，否则滑块呈现为 0项目。

load.js

var getData = function (item, id) {
    $.ajax({
        //ajax options,
        success: function (data) {
            constHTML(item, data);
        }
    });
}

var constHTML = function (item, data) {
    if (condition) {
        for (var i in data.results) {
            //Do something
        }
    }
    else if (condition) {
        //Do something
    }
}

var getID = function () {
    //Code...
};

main.js

//Execute getData scripts
if (condition) {
    getData('single', getID());
} else if (condition){
    getData('list', getID());
}

var carousel() = function(){
    //do stuff
}

//call carousel() MUST execute after constHTML in load.js is done
carousel();

HTML

<script src="js/jquery.min.js" defer></script>
<script src="js/load.js" defer></script>
<script src="js/owl.carousel.min.js" defer></script>
<script src="js/main.js" defer></script>

所以上面代码的结果是 load.js 加载然后 main.js 加载，调用 getData()，ajax 调用开始然后执行 carousel()，constHTML 等等. 我想做的是等到 constHTML() 完成，然后继续 carousel();。 我不知道如何实现延迟对象和跨文件功能的承诺。

Answer 1

您的 getData 必须 return ajax 调用才能使用 .then( doneCallbacks, failCallbacks ):

var getData = function (item, id) {
    return $.ajax({
        //ajax options,
        success: function (data) {
            constHTML(item, data);
        }
    });
}

getData(....).then(
     function() {
       alert( "succeeded" );
     }, function() {
       alert( "failed!" );
     }
 );

我怎样才能等待外部文件功能完成然后在 main 上继续？

How can I wait for an external file function to finish then continue on main?

javascript

jquery

carousel