Как я могу дождаться завершения функции внешнего файла, а затем продолжить на основной? - PullRequest
Новая
       18

Как я могу дождаться завершения функции внешнего файла, а затем продолжить на основной?

0 голосов
/ 25 мая 2019

У меня есть main.js и load.js, в load.js есть две важные функции: getData, который является пост-вызовом AJAX, и constHTML, который добавляет данные на основе массива JSON, возвращенного из вызова AJAX. Эти данные добавляются в div, который становится слайдером карусели, когда я вызываю carousel () для main.js, поэтому важно добавить данные перед функцией 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 (), ТОГДА продолжить карусель (); . Я не могу понять, как реализовать отложенные объекты и обещать кросс-файловые функции.

1 Ответ

1 голос
/ 26 мая 2019

Ваш 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!" );
     }
 );
...