jquery - set global variable in ajax get success -

this question has answer here:

• why variable unaltered after modify inside of function? - asynchronous code reference 6 answers

i want set variable next_load during success of ajax call. i've read can't accomplished because call aysnc , set call sync slow down performance. tried method below yet still can't set variable. can point out went wrong?

    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); 

or better yet delightedd0d

this spot on want accomplish. want able pass next_load variable function , reuse in getdata function. problem im having multiple next_load build when loop begins. here did code:

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> 

the 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 value till 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 pass next_load im getting previous next load , new next load @ same time. on next click amount compounds.     });  } 

in console:

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

if reset variable next_load keep build occuring? tried empty variable before ajax call still build up.

you can set value there can't use till async function returns. you'll need use success callback function know when ajax promise has resolved , use value this:

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 value till ajax promise resolves here           console.log(next_load); // or use here directly      }   }) } getdata();  function usenextload(){    console.log(next_load); } 

---

or better yet, lose global altogether , pass response function success callback.

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 value till ajax promise resolves here         }   }) } getdata();  function usenextload(next_load){    console.log(next_load); } 

a better better way pass callback getdata function handle response like:

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); });