Question

我有main.js和load.js，在load.js中有2个关键功能，getData是AJAX调用，而constHTML根据从AJAX调用返回的JSON数组追加数据。当我在main.js上调用carousel（）时，该数据将附加到一个div上，该div将成为一个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 必须返回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上继续？

1 个答案: