javascript - 如何等待外部文件功能完成然后继续主程序？

Question

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

加载.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 调用开始 THEN carousel() 执行，constHTML 等等。 我想做的是等到 constHTML() 完成然后继续 carousel(); . 我不知道如何实现延迟对象和跨文件功能的承诺。

标签： javascriptjquerycarousel

Answer 1

您的getData必须返回 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!" );
     }
 );