如何调用带参数的回调函数？答案

【问题标题】：How can I call a callback functions with parameters?如何调用带参数的回调函数？
【发布时间】：2020-05-26 12:07:36
【问题描述】：

我目前正在使用Wikipedia API 通过维基百科进行简单搜索，我有一个<select> 下拉菜单和一个带有自动完成功能的简单输入。

我想要做的是能够以不同的语言进行搜索，自动完成功能适用于语言，但是当我尝试通过单击我的自动完成链接之一进行搜索时，它返回“未定义”。（例如 undefined.wikipedia.org 而不是 en.wikipedia.org）

到目前为止，这是我尝试过的：

// Function to select id
var yb = {
  id: function(str) {
    return document.getElementById(str);
  },
};

var tag = "";

// When user is typing
yb.id("search").onkeyup = function(e) {
  if (!e.keyCode.toString().match(/^(37|38|39|40|13|16|17|18|224)$/)) {
    if (tag !== "") {
      document.body.removeChild(tag);
    }

    tag = document.createElement("script");
    var term = yb.id("search").value;
    var lang = yb.id("lang").value;

    // API link
    tag.src =
      "https://" + lang + ".wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=ybComplete&search=" +
      term;
    document.body.appendChild(tag);
  }
};

// The search function
function ybComplete(data, lang) {
  yb.id("wikiOutput").innerHTML = "";

  for (var i = 0; i < 5; i++) {
    if (data[1][i]) {
      yb.id("wikiOutput").innerHTML +=
        '<p><b><a href="https://' + lang + '.wikipedia.org/wiki/' +
        data[1][i] +
        '">' +
        data[1][i] +
        "</a></b><br>" +
        data[2][i] +
        "</p>";
    }
  }
}

<input id="search" name="search" type="text" autocomplete="off" />
<select id="lang" name="lang">
  <option value="en" selected="selected">Language</option>
  <option value="en">English</option>
  <option value="fr">French</option>
</select>

<div id="wikiOutput"></div>

在 API 链接中有一个参数“回调”调用我的函数 (ybComplete())，我如何告诉链接能够根据 lang 变量更改语言？

【问题讨论】：

标签： javascript html wikipedia wikipedia-api

【解决方案1】：

不要传递语言。从选择中获取它

这是一个更好的版本，当您更改语言时会重新进行搜索

// Function to select id
var yb = {
  id: function(str) {
    return document.getElementById(str);
  },
};

let keyupEvent = new Event('keyup');
let wiki = "https://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=ybComplete&search="
let tag = "";

// When user is typing
yb.id("search").addEventListener("keyup", function(e) {
  if (!e.keyCode || !e.keyCode.toString().match(/^(37|38|39|40|13|16|17|18|224)$/)) {
    if (tag !== "") {
      document.body.removeChild(tag);
    }

    tag = document.createElement("script");
    const term = yb.id("search").value;
    // API link
    tag.src = wiki + encodeURIComponent(term);
    document.body.appendChild(tag);
  }
});

yb.id("lang").addEventListener("change", function() {
  wiki = wiki.replace(/[a-z]{2}\.wikipedia\.org/,this.value+".wikipedia.org")
  yb.id("search").dispatchEvent(keyupEvent)
})

// The search function
function ybComplete(data) {
  yb.id("wikiOutput").innerHTML = "";
  const lang = yb.id("lang").value
  for (var i = 0; i < 5; i++) {
    if (data[1][i]) {
      yb.id("wikiOutput").innerHTML +=
        '<p><b><a href="https://' + lang + '.wikipedia.org/wiki/' +
        data[1][i] +
        '">' +
        data[1][i] +
        "</a></b><br>" +
        data[2][i] +
        "</p>";
    }
  }
}

<input id="search" name="search" type="text" autocomplete="off" />
<select id="lang" name="lang">
  <option value="en" selected="selected">Language</option>
  <option value="en">English</option>
  <option value="fr">French</option>
</select>

<div id="wikiOutput"></div>

【讨论】：

@MichaelBurns 我重写了在输入字段中仍然是文本时处理语言更改

【解决方案2】：

这是一个简单的解决方案。
不要使用 ybComplete 作为回调，而是使用这个函数：

beforeYbComplete(data){
   ybComplete(yb.id("lang").value, data)
}

并在 handleSearch 中更改这一行：

// API link
tag.src = "https://" + lang + ".wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=beforeYbComplete&search=" + term;

【讨论】：