Question

我遇到使用JQuery读取文本文件并从JQuery get函数中获取值的问题。

如下面的代码所示，第一个console.log将正确显示原因，但是当它出现时，第二个控制台日志将没有任何内容。

我想知道如何解决这个问题？

function getCauses() {
    var causes = new Array();
    if ($("#game-type").val() == "basketball") {

        $.get('basketball.txt', function(data) {
            //split on new lines
            causes = data.split('\n');
            console.log(causes);
        });

        console.log("second: " + causes);
    }

    var c = "<option></option>";
    for (var i = 0; i < causes.length; i++) {
        c += "<option value='" + causes[i] + "'>" + causes[i] + "</option>";
    }
    return c;
}

Answer 1

~~$.get()是异步的，因此您需要使用.then()来确保代码在get完成后运行。~~

~~＆＃39; $。get（）`返回一个promise，所以this MDN page有一些很好的例子。~~

编辑：我很傻，错过了已经取得成功的事实。您可以尝试将承诺从$.get()返回到其他功能并将内容添加到DOM中。或者，直接在success函数中执行DOM内容。

编辑（再次）：问题仍然来自对异步调用如何工作的误解。他在那里有成功函数这一事实并没有像C＃中的.wait()函数那样将其更改为非异步。浏览器将很高兴地启动$.get()的同步调用，然后继续到函数结束并返回，而不等待异步函数返回。如果OP希望在Ajax调用完成时发生事情，则要么所有内容都需要在success函数中，要么他的函数需要返回在其代码中的其他地方使用的promise。

因此，我的第一个建议看起来像这样，利用了潜在的承诺并返回以后要消耗的东西：

function getCauses() {
  return $.get('basketball.txt');
}

// Use function for stuff
function mainOrWhatever() {
  if ($("#game-type").val() == "basketball") {
    getCauses().done((data)=>{
      var causes = new Array();
      causes = data.split('\n');
      console.log(causes);
      var c = "<option></option>";
      for (var i = 0; i < causes.length; i++) {
        c += "<option value='" + causes[i] + "'>" + causes[i] + "</option>";
      }
      // Use it for whatever
      $("#dropDown").appendTo(c);
    }
  }
}

我的第二个建议（可能是更好的建议）就是将所有内容都放入成功通话中。

function getCauses() {
  if ($("#game-type").val() == "basketball") {
    $.get('basketball.txt',(data)=>{
      var causes = data.split('\n');
      console.log(causes);
      var c = "<option></option>";
      for (var i = 0; i < causes.length; i++) {
        c += "<option value='" + causes[i] + "'>" + causes[i] + "</option>";
      }
      // Use it for whatever
      $("#dropDown").appendTo(c);
    });
  }
}

当然，人们总是可以选择Bhavik的路线，但是我仍然不确定你是想要阻止页面加载还是按钮点击处理或网络通话中可能需要一段时间。这里似乎更好的解决方案是更改周围的事情以利用对$.get()的异步调用，而不是交叉手指，并希望在加载文件时没有任何内容挂起。

Answer 2

所有Ajax调用都可以异步完成（使用回调函数，这将是在成功键之后指定的函数）或同步 - 有效地阻塞并等待服务器应答。要获得同步执行，您必须指定

async: false

function getCauses() {

  var causes = new Array();
  if ($("#game-type").val() == "basketball") {

     $.ajax({
        url:'basketball.txt',
        async: false, // try this
        success:function (data) {
          //split on new lines
          causes = data.split('\n');
          console.log(causes);
        }
     });

     console.log("second: " + causes);
   }

   var c = "<option></option>";
   for (var i = 0; i < causes.length; i++) {
      c += "<option value='" + causes[i] + "'>" + causes[i] + "</option>";
   }
   return c;
}

试试这个

使用jQuery读取一个txt文件无法返回该函数的值

2 个答案: