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

Question

这个问题已经有答案了:

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference (7 个回答)

已关闭 7 年前。

我想在 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

您可以在那里设置值，只是在异步函数返回之前无法使用它。您需要使用 success 回调函数来了解 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);
});