Question

我想在ajax调用成功期间设置变量next_load。我已经读过，这是无法实现的，因为呼叫是aysnc并且我可以将呼叫设置为同步，但这会降低性能。我尝试了下面的方法，但仍然无法设置变量。你能指出我哪里出错吗？

    var next_load = "";

function getData() {
    $.ajax({
        url : 'student/calendar/show/2016/02',
        type: 'GET',
        success : function(response){
            var $result = $(response).filter('li');
            $('.box-content').append($result);

             next_load = $result.last().attr('data-date');
        }
    })
}

getData();

console.log(next_load);

或者更好 由DelightedD0D

这是我想要完成的事情。我希望能够将next_load变量传递给另一个函数并在getdata函数中重用它。我现在遇到的问题是当循环开始时我得到多个next_load。以下是我对代码所做的事情：

HTML：

<div id = "calendar">
                <div class = "box">
                    <ul class = "label">
                        <li>Sun</li>
                        <li>Mon</li>
                        <li>Tue</li>
                        <li>Wed</li>
                        <li>Thur</li>
                        <li>Fri</li>
                        <li>Sat</li>
                    </ul>
                </div>
                <ul class = "box-content">

                </ul>
    </div>

Jquery：

    function getData(url) {
    var next_load = '';
    $.ajax({
        url: 'student/calendar/' + url,
        type: 'GET',
        success: function(response) {
            var $result = $(response).filter('li');
            $('.box-content').append($result);

            next_load = $result.last().attr('data-date');
            useNextLoad(next_load); // dont use the value till the ajax promise resolves here

        }
    })
}
getData('show/2016/02');

function useNextLoad(next_load){
    var load = next_load;
    $('.box').click(function(){
       getData('load/' + load);
        console.log(load); // when i pass the next_load Im getting the previous next load and the new next load at the same time. Then on the next click the amount compounds.
    });

}

控制台中的

：

    2 calendar.js:34 2016-03-05
calendar.js:34 2016-04-09

如果我重置变量next_load会阻止构建发生吗？我试图在ajax调用之前清空变量，但我仍然得到了构建。

Answer 1

您可以在那里设置值在async函数返回之前您无法使用它。您需要使用成功回调函数来了解ajax promise何时解决并使用如下值：

var next_load = "";

function getData() {
  $.ajax({
    url: 'student/calendar/show/2016/02',
    type: 'GET',
    success: function(response) {
      var $result = $(response).filter('li');
      $('.box-content').append($result);

      next_load = $result.last().attr('data-date');
      useNextLoad(); // dont use the value till the ajax promise resolves here   

      console.log(next_load); // or just use it here directly

    }
  })
}
getData();

function useNextLoad(){
   console.log(next_load);
}

或者更好，完全失去全局，只需从成功回调中将响应传递给函数。

function getData() {
  $.ajax({
    url: 'student/calendar/show/2016/02',
    type: 'GET',
    success: function(response) {
      var $result = $(response).filter('li');
      $('.box-content').append($result);

      var next_load = $result.last().attr('data-date');
      useNextLoad(next_load); // dont use the value till the ajax promise resolves here   

    }
  })
}
getData();

function useNextLoad(next_load){
   console.log(next_load);
}

更好的方法是将回调传递给getData函数来处理响应，如：

function getData(callback) {
  $.ajax({
    url: 'student/calendar/show/2016/02',
    type: 'GET',
    success: callback
  })
}
getData(function(response) {
  var $result = $(response).filter('li');
  $('.box-content').append($result);
  var next_load = $result.last().attr('data-date');
  console.log(next_load);
});

在ajax中设置全局变量获得成功

1 个答案: