我如何使用参数调用回调函数？

Posted 2021-04-29

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

[我想做的是能够使用不同的语言进行搜索，自动完成功能可以与多种语言配合使用，但是当我尝试通过单击我的自动完成链接之一进行搜索时，它会返回“ undefined” 。 （例如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链接中有一个参数“ callback”调用了我的函数（ybComplete()，我如何告诉链接能够基于lang变量来更改语言？

答案

请勿通过lang。从选择中获取

// 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) {
  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>

以上是关于我如何使用参数调用回调函数？的主要内容，如果未能解决你的问题，请参考以下文章

如何等到回调被调用

如何等到回调被调用

如何从片段 KOTLIN 中调用意图 [重复]

回调函数如何传参？

如何从 C# 调用具有 void* 回调和对象参数的 C++ Dll 中的函数

使用 forEach 时避免回调多次调用