javascript - 试图制作可重用的 javascript 函数，但数据没有返回

Question

我想创建一个函数，当我调用它时，我可以指定一个性别，它会返回一个随机名称。问题是我希望它可以重复使用，这是我遇到困难的地方。

var Name = '';
var Gender = '';

var NameChild1(){
  var Child1Gender = 'Male'
  Child1Name = NameFunction(Child1Gender, Child1Name)
}

function NameFunction(Gender, Name) {
  var NameChance1 = Math.floor(Math.random() * 10) + 1;
  NameChance1 = NameChance1.toString();
  d3.csv('Names.csv', function(NameData) {
    var NameFilter = NameData.filter(function(d) {
      return (d.Rank == NameChance1)
    })
    if (Gender == 'Female') {
      Name = NameFilter[0]['NameFemale'];
      return (Name);
    } else if (Gender == 'Male') {
      return (Name);
    };
  });
};

如果我在 if 语句中执行 console.log，则名称过滤器在 if 语句中确实有效 - 但它不会返回过去。

有人知道问题出在哪里吗？

此外，如果有帮助，这是 CSV!

Rank,NameMale,NameFemale
1,Oliver ,Amelia 
2,Jack ,Olivia 
3,Harry ,Emily 
4,George ,Isla 
5,Jacob ,Ava 
6,Charlie ,Ella 
7,Noah ,Jessica 
8,William ,Isabella 
9,Thomas ,Mia 
10,Oscar ,Poppy

Answer 1

这个函数会返回undefined。

function NameFunction(Gender, Name) {
  var NameChance1 = Math.floor(Math.random() * 10) + 1;
  NameChance1 = NameChance1.toString();
  d3.csv('Names.csv', function(NameData) {
    var NameFilter = NameData.filter(function(d) {
      return (d.Rank == NameChance1)
    })
    if (Gender == 'Female') {
      Name = NameFilter[0]['NameFemale'];
      return (Name);
    } else if (Gender == 'Male') {
      return (Name);
    };
  });
};

原因 d3.csv('Names.csv') 是异步的。

所以你可以这样做:

var Name = '';
var Gender = '';
function NameFunction(Gender, Name, NameData) {
  var NameChance1 = Math.floor(Math.random() * 10) + 1;
  NameChance1 = NameChance1.toString();
    var NameFilter = NameData.filter(function(d) {
      return (d.Rank == NameChance1)
    })
    if (Gender == 'Female') {
      Name = NameFilter[0]['NameFemale'];
      return (Name);
    } else if (Gender == 'Male') {
      Name = NameFilter[0]['NameMale'];
      return (Name);
    };
  });
};
var NameChild1 = function(NameData){
  var Child1Gender = 'Male'
  Child1Name = NameFunction(Child1Gender, Child1Name, NameData)
  //you can do stuff with Child1Name
}
function loadMyCSV(){
  return d3.csv('Names.csv', function(NameData) {
    NameChild1(NameData);
  }
}
loadMyCSV();

简而言之:

1 你先调用loadMyCSV()

1.1。 loadMyCSV NameChild1 成功时将被调用并将完整的解析数据传递给该函数。

1.2。 NameChild1 将调用 NameFunction，后者将获取 Child1Name。

希望这对您有所帮助!