Question

我在下面有这段代码：它对URL进行GET调用，获取一些对象，并将图像附加到HTML标记。

function getDataFromApi(searchTerm, callback) {
  const URL1 = `some url`;

  const design = {
    url: URL1,
    data: {
      "dog breed name": searchTerm
    },
    type: 'GET',
    success: callback
  };
  $.ajax(design);
}

function displaySearchData(data) {
  const allResultsLength = data.message.length;
  const ranNum = Math.floor(Math.random() * allResultsLength);
  const dogResults = data.message[ranNum];
  $(`.js-search-results`).html(`<img src = ${dogResults}>`);
}

function watchSubmit() {
  $('.js-search-form').submit(event => {
    event.preventDefault();
    let queryTarget = $(event.currentTarget).find('.js-query');
    let query = queryTarget.val();
    queryTarget.val("");
    getDataFromApi(query, displaySearchData);
  });
}

$(watchSubmit);

我得到getDataFromApi和watchSubmit，但getDataFromApi(query, displaySearchData);对我来说根本不直观。我一直在编写Java，对我来说没有参数调用displaySearchData是没有意义的 - 似乎该行应该是getDataFromApi(query, displaySearchData(data));。

有人可以解释这是如何编译的＆amp;在javascript中执行（基本上这是一个合法的语法）？

Answer 1

您需要查看的是函数getDataFromApi（）。

在该功能中，您有一个“回调”参数。稍后将此参数添加到$ .ajax中。这是一个jQuery函数，它将在某个条件匹配时提供一些回调（比如在发送请求之前，收到响应时，......）。这个$ .ajax回调为您提供了3个参数，其中一个是数据（正在使用的数据，textStatus和jqXHR。通常，您只需要注意数据，因为它包含您请求数据的响应。

所以当$ .ajax成功时，将调用“回调”函数，即displaySearchData。由于$ .ajax回调为您提供了data参数，您可以将它们添加到displaySearchData的参数中。请注意，如果需要，您可以添加额外的2个参数。

您可以在此处查看该功能：jQuery Ajax

Answer 2

在善良的jquery的某个地方，有一段代码：

$.ajax = function(config){
    ...
    // get the response from XHR request, 
    // and save it in, say, 'response'
    ...
    // now check, if the response is OK 200 
    // and if so, execute next line
    // which is basically - calling your displaySearchData method
    config.success(response);
    ...
}

现在，config是您的design对象，其中有一个属性success，其中包含对您displaySearchData方法的引用。

方法data的{{1}}参数现在将引用方法调用displaySearchData中传递的变量response。

编辑：参数config.success(response)还将方法callback的引用转发给displaySearchData

需要注意的概念：

函数可以在Javascript中作为参数传递给另一个函数，在这种情况下，我们只需要将引用变量作为参数传递。

：不需要调用括号getDataFromApi

()

欢迎来到JavaScript我的朋友。随着您继续使用JS，准备好体验更多神奇的怪异。祝你好运。

javascript函数如何调用工作？

2 个答案: