Глобальные переменные Javascript, используемые в качестве флагов

Question

Я пытаюсь использовать глобальные переменные в качестве флагов и не могу заставить их работать. У меня есть две функции:

Эта функция устанавливает флаг как false, когда это делается.

function buildYearsTable(btn) { 
    //console.log ("At build years table") 
    var fundCode = document.getElementById("fundCode").value 
    buildYearsFlag = true; 
    $.ajax({url: "/scholarship/scholarshipMaintenance/buildYearsTable", method: "POST", 
    cache: false, data: {fundCode: fundCode}, 
    complete: function(xhr, statusCode){ 
     console.log("inside build years table") 
     data = $.parseJSON(xhr.responseText) 
     $('#myTable tbody').html(''); 
     data = data.sort() 
     data = data.reverse() 
     for(var i = data.length - 1; i >= 0; i--) { 
     moveYearOption(data[i]) 
     addYearRow(data[i]) 
     } 
     buildYearsFlag = false; 
     //$('#yearsTable').html(xhr.responseText) 
     console.log("done in build years table") 
    }}) 
} 

Эта функция вызывается, когда первый из них называется, но мне это нужно, чтобы выполнять свою АЯКС вызов только после того, как флаг установлен в ложь первой функции. Я не уверен, как это сделать. Я думал о петле while (опрос идеи), но не уверен, как это сделать.

function rebuildYearSelects(btn) { 
    //console.log ("At rebuild selects") 
    var fundCode = document.getElementById("fundCode").value 
    while (buildYearsFlag == false) { 
    $.ajax({url: "/scholarship/scholarshipMaintenance/rebuildYearSelects", method: "POST", 
     cache: false, data: {fundCode: fundCode}, 
     complete: function(xhr, statusCode){ 
     console.log("got inside rebuild years select") 
     data = $.parseJSON(xhr.responseText) 

     selectedYears = data.sortedSelectedYears 
     unselectedYears = data.sortedUnselectedYears 

     $('#yearsModal').replaceWith(data.html) 
     fixModals(); 
     buildYearsFlag = true; 
     console.log("done in rebuildYearSelects") 
    }}) 
    } 
} 

Answer 1

Лучший способ добиться этого - использовать обратные вызовы. Вам нужно просто вызвать вторую функцию после ответа от первого.

Вы должны использовать 'done' вместо 'complete'.

function buildYearsTable(btn) { 
     var fundCode = document.getElementById("fundCode").value 

     $.ajax({url: "/scholarship/scholarshipMaintenance/buildYearsTable", method: "POST", 
     cache: false, data: {fundCode: fundCode}, 
     done: function(data){ 

      // Your code goes here 

      // Call the function only after the response 
      rebuildYearSelects(); 

     }}) 
    } 

Html:

onclick="buildYearsTable();" 

Удалить флаги и время цикла, все должно работать.