使用jQuery读取txt文件无法从函数中返回值[重复]

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

所有 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;
}

试试这个

Answer 2

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

'$.get()` 返回一个承诺，所以this MDN page 有一些很好的例子。

编辑：我很傻，错过了已经成功的事实。您可以尝试将来自$.get() 的承诺返回给其他函数，并将这些内容添加到那里的 DOM 中。或者，直接在成功函数中做 DOM 的东西。

编辑（再次）：问题仍然来自对异步调用如何工作的误解。他在那里有一个成功函数这一事实并没有像 C# 中的 .wait() 函数那样将其更改为非异步函数。浏览器将愉快地触发$.get() 的同步调用，然后继续到函数的末尾并返回，而无需等待异步函数返回。如果 OP 希望在 Ajax 调用完成时发生某些事情，要么一切都需要在成功函数中，要么他的函数需要返回要在其代码的其他地方使用的承诺。

所以我的第一个建议看起来像这样，它利用了潜在的承诺并返回以供以后使用：

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() 的异步调用，而不是交叉手指并希望在加载文件时没有任何东西挂起。