Question

我在拉大数据文件时遇到了一个时间问题。有时在“getFileData（selectedFile）”之后的语句在下载文件之前执行，并且语句失败。我正在考虑一个“暂停”功能，但必须有更好的东西。

$("#dropDown").change(function (){
  var selectedFile = $("#dropDown").val();
  var text = getFileData(selectedFile);

  var valueLength = text.constructs[0].data_sections[0].values.length;
  var errorLength = text.constructs[0].data_sections[0].errors.length;
   . . . . 
   . . . .
   . . . .

});

var getFileData = function(fileName){

   var xmlhttp = new XMLHttpRequest();
   var url = "http://xxx/xxx.php";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var response = JSON.parse(xmlhttp.responseText.substr(0,xmlhttp.responseText(indexOf("<")));
        return response;
    }
}
xmlhttp.open("GET", url + "?q=" + fileName + ".txt", true);
xmlhttp.send();

}

Answer 1

你是对的，有更好的方法：回调函数。如果您不熟悉回调，下面的代码可能没有最大意义。我没有测试过它，但它应该起作用或至少接近它。检查一下，以获得有关回调http://www.impressivewebs.com/callback-functions-javascript/的参考。

$("#dropDown").change(function (){
  var selectedFile = $("#dropDown").val();
  var text = getFileData(selectedFile, function(response){
    //stuff that should not execute until XMLHttpRequest completes 
    var valueLength = response.constructs[0].data_sections[0].values.length;
    var errorLength = response.constructs[0].data_sections[0].errors.length;
     . . . . 
     . . . .
     . . . .
  });    
});

var getFileData = function(fileName, callback){

   var xmlhttp = new XMLHttpRequest();
   var url = "http://xxx/xxx.php";

   xmlhttp.onreadystatechange=function() {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
           var response = JSON.parse(xmlhttp.responseText.substr(0,xmlhttp.responseText(indexOf("<")));
           callback(response);
       }
   }
   xmlhttp.open("GET", url + "?q=" + fileName + ".txt", true);
   xmlhttp.send();
}

事实上，你拥有的代码永远不会有效。您的getFileData函数将始终在HTTP请求完成之前返回，因此在您的return语句被命中之前。回调模式对于学习非常有用，并且基本上允许您提供在一些延迟之后执行的代码，无论该延迟是由于HTTP请求，动画，还是您的名字。

Answer 2

由于您正在使用jQuery，因此您也可以使用jQuery ajax()函数。此函数返回deferred对象，您可以使用deferred.done()方法在AJAX请求完成时执行代码。 done()接受一个参数，该参数是您在请求完成时要运行的函数。

$("#dropDown").change(function (){
    var selectedFile = $("#dropDown").val();
    var deferred = getFileData(selectedFile);
    deferred.done(function (data) {
        var text = JSON.parse(data.substr(0, data.indexOf("<"));
        var valueLength = text.constructs[0].data_sections[0].values.length;
        var errorLength = text.constructs[0].data_sections[0].errors.length;
        . . . 
    });
});

var getFileData = function(fileName) {
    return $.ajax({
        url: "http://xxx/xxx.php?q=" + fileName + ".txt"
    });
}

注意：默认情况下，这将执行GET请求。如果您想进行POST，可以在ajax调用中指定类型：

$.ajax({
    url: "http://xxx/xxx.php?q=" + fileName + ".txt",
    type: "POST"
});

javascript http请求滞后

2 个答案: