javascript - jquery 将 ajax 响应和用户定义的变量返回给函数

Question

我在将定义的变量从 ajax 调用传递给函数时遇到问题。应该发生的是点击一个元素，它应该将被点击元素的文本传递给函数，执行一个与定义的变量无关的ajax调用，将变量和调用的数据返回给另一个函数渲染元素。当我到达呈现 html 内容的函数时，该变量现在未定义。

我的问题是如何将与 ajax 调用无关的 ajax 响应数据和用户定义的变量发送到另一个函数？

我的 JSON 函数:

function getJSONP(url, data) {
  return $.ajax(url, {
    dataType: 'json',
    data: data
  });
}

我的点击事件:

$('.day').on('click', function() {
  getTimes($(this).text());
});

我的第一个执行 ajax 的函数(这是选择器返回值的地方):

function getTimes(selector) {
  console.log(selector);
  var eventDate = selector;

  getJSONP(CAL_API_URL).then(function(data) {
    data = _.valuesIn(data)[5][0];
    return data;
  }).then(appendTimes(eventDate));
}

我的第二个渲染 HTML 的函数(这里的选择器是未定义的):

function appendTimes(dates, selector) {
  console.log(selector);

  _.forEach(dates, function(k, v) {
    // Returns each event

    _.forEach(k, function(k2, v2) {
      // Returns multiple objects for each event

      var availableTimes = k2.startTime + " (" + k2.open + " spots left!)",
          timeId = k2.id;
      $('.timeslot select').append('<option data-id="' + timeId +'">' + availableTimes + '</option>');
    });
  });
}

Answer 1

在这种情况下，如果您将 appendTimes 切换为仅接受 selector 并让它返回一个函数，则返回的函数将在数据可用时被调用。

function appendTimes(selector) {
  console.log(selector);
  return function (datas) {
    _.forEach(dates, function(k, v) {
      // Returns each event

      _.forEach(k, function(k2, v2) {
        // Returns multiple objects for each event

        var availableTimes = k2.startTime + " (" + k2.open + " spots left!)",
            timeId = k2.id;
        $('.timeslot select').append('<option data-id="' + timeId +'">' + availableTimes + '</option>');
      });
    });
  }
}