Как предотвратить асинхронность в ajax с помощью JQuery

Question

Я не могу объяснить свои вопросы словом, я отправлю свой код. Тогда попробуйте объяснить это там.

$('#all').on('change', function(){ //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also. 

$.ajax({ 
    type:"GET", 
    url: "phpfunction.php?getFromTo=all", 
    dataType:"json", 
    success: function(data){ 
     $('#slctfrom').find('option').remove().end(); 
     $('#slctto').find('option').remove().end(); 
     $('#slctyr').find('option').remove().end(); 
     $.each(data, function(index, item) { 
      if (item.dt != "") { 
       $('#slctfrom').append('<option value='+item.dt+'>'+item.dt+'</option>'); 
       $('#slctto').append('<option value='+item.dt+'>'+item.dt+'</option>'); 
       $('#slctyr').append('<option value='+item.dt+'>'+item.dt+'</option>'); 
      } 
     }); 
    } 
}); 

var fyy = document.getElementById("slctfrom").value; 
var tyy = document.getElementById("slctto").value; 
var yr = document.getElementById("slctyr").value; 
var type = document.getElementById("slcttype").value; 
var graph; 
if (document.getElementById("column").checked) { 
    graph = "column"; 
} else if (document.getElementById("line").checked) { 
    graph = "line"; 
} else if (document.getElementById("area").checked) { 
    graph = "area"; 
} else { 
    graph = "pie"; 
} 
if (tyy < fyy) { 
    document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value."; 
} else { 
    chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART. 
} 
}); 

Я хочу, чтобы выполнить мой Аякс первым, а затем он выполняет свою OnChange, потому что иногда мои варианты получить нуль, а затем, если я пытаюсь изменить проверенный в радиокнопках, который #bdo не входит в моем коде, так как это так же, как #All, будет обнулена навсегда, он не получает новое значение

Answer 1

Поместите свой код в функции обратного вызова успеха/ошибки.

$('#all').on('change', function() { //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also. 

    $.ajax({ 
     type: "GET", 
     url: "phpfunction.php?getFromTo=all", 
     dataType: "json", 
     success: function(data) { 

      ajaxCallback(); 

      $('#slctfrom').find('option').remove().end(); 
      $('#slctto').find('option').remove().end(); 
      $('#slctyr').find('option').remove().end(); 
      $.each(data, function(index, item) { 
       if (item.dt != "") { 
        $('#slctfrom').append('<option value=' + item.dt + '>' + item.dt + '</option>'); 
        $('#slctto').append('<option value=' + item.dt + '>' + item.dt + '</option>'); 
        $('#slctyr').append('<option value=' + item.dt + '>' + item.dt + '</option>'); 
       } 
      }); 
     }, 
     error: function() { 
      ajaxCallback(); 
     } 
    }); 


    function ajaxCallback() { 
     var fyy = document.getElementById("slctfrom").value; 
     var tyy = document.getElementById("slctto").value; 
     var yr = document.getElementById("slctyr").value; 
     var type = document.getElementById("slcttype").value; 
     var graph; 
     if (document.getElementById("column").checked) { 
      graph = "column"; 
     } else if (document.getElementById("line").checked) { 
      graph = "line"; 
     } else if (document.getElementById("area").checked) { 
      graph = "area"; 
     } else { 
      graph = "pie"; 
     } 
     if (tyy < fyy) { 
      document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value."; 
     } else { 
      chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART. 
     } 
    } 
}); 

Answer 2

Используйте асинхр ложь в качестве опции в Ajax называют

Answer 3

Я думаю, вы можете поместить вызов ajax в готовое событие jQuery. потому что URL всегда один и тот же. И используйте для этого $.getJSON.

И если вызов ajax длинный, вы можете добавить маску загрузки, чтобы предотвратить использование огня для события изменения.

$(function(){ 
    $.getJSON('phpfunction.php?getFromTo=all', function(data){ 
     $('#slctfrom, #slctto, #slctyr').empty(); 
     if(!data){ 
      return; 
     } 

     $.each(data, function(index, item){ 
      if (item.dt != "") { 
       $('#slctfrom, #slctto, #slctyr').append('<option value='+item.dt+'>'+item.dt+'</option>'); 
      }  
     }); 
    }); 
}); 

$('#all').on('change', function(){ //ONCHANGE RADIOBUTTON, THERE ARE #bdo, #cash also. 

    var fyy = $("#slctfrom").val(); //may be this is better 
    var tyy = document.getElementById("slctto").value; 
    var yr = document.getElementById("slctyr").value; 
    var type = document.getElementById("slcttype").value; 
    var graph; 
    if (document.getElementById("column").checked) { 
      graph = "column"; 
    } else if (document.getElementById("line").checked) { 
      graph = "line"; 
    } else if (document.getElementById("area").checked) { 
      graph = "area"; 
    } else { 
      graph = "pie"; 
    } 
    if (tyy < fyy) { 
      document.getElementById("errormsg").innerHTML = "Error: The 'To' value must be greater than or equal the 'From' value."; 
    } else { 
      chart("all", graph, fyy, tyy, yr, type); //FUNCTION CHART. 
    } 
});