title: Global Variable not affected in JQuery Ajax Success Function
body: <p>I have a recursive function that populates a list until the bottom of the screen is reached, then stops.  </p>
  
  <p>Each time the recursive function is called, the "start" global variable increments by the limit (5).  For example, after 3 times, the "start" variable should be 15.  This shows up correctly in the console.</p>
  
  <p>However, outside the recursive function, it seems the "start" variable is still at "0".  I thought using "var start = 0" outside of the function makes it global and should be changed by the Ajax success function.  The code is below:</p>
  
  <pre><code>//****************************************************************
  //        Loading questions and answers listings
  //****************************************************************
  var tag = '';//initialize as blank
  var search = '';//initialize as blank
  var limit = 5;//number of records to autoload each time
  var start = 0;//start at record 0
  var action = 'inactive';//initial status to get initial load
  var autoscroll = 'false';//check box to engage auto scroll or keep manual load more 
  var checked = '';//check box value for autoscroll
  function load_data(limit, start, search, tag){//recursive function for auto loading
      search = $('#search').val();
      var loads;
      $.ajax({
           url:"/modules/posts/questions_all_autoscroll_fetchdata.php",
           method:"POST",
           data:{limit:limit, start:start, search:search, tag:tag},
           cache:false,
           success:function(data){
              $('#load_data_message').show();//bring loading button back once load successful.  
              //It is removed during tag click search to avoid glitchy appearance of button showing at top left briefly.
              $('#load_data').append(data);
              //checks if quantity "limit" amount loaded.  If not, that means end of data reached.
              //Each data piece has id="container", so counting them tells how many data pieces returned in "loads"
              loads = $(data).find('.card-header').length;             
              if(loads&lt;limit){button_name = 'End of Data';}else{button_name='Loading More &amp;nbsp;&amp;nbsp;&lt;i class="fas fa-spinner fa-lg fa-spin"&gt;&lt;/i&gt;';}
              if(autoscroll == 'false'){button_name = 'Load More'};
              //append data returned to bottom of existing data
              $('#load_data_message').html("&lt;div id='please_wait' class='form-row text-center'&gt;\
                    &lt;div class='col-12'&gt;&lt;button type='button' class='btn btn-warning'&gt;\
                    "+button_name+"&lt;/button&gt;\
                    &lt;label style='cursor:pointer;'&gt;&lt;input id='autoscroll' type='checkbox' name='autoscroll' value='true' "+checked+"\
                    style='transform:scale(2.0);margin-left:10px;margin-top:15px;cursor:pointer;'&gt;&amp;nbsp;&amp;nbsp;Autoscroll&lt;/label&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;");
              action = "inactive";
              //recursive part - keep loading data until bottom of screen reached, stop when reached, or when end of data
              start = start + limit;
              console.log(start);
              if(loads&gt;=limit){
                  if($("#load_data").height() &lt; $(window).height()){load_data(limit,start,search,tag);}
              }
          }
      });            
  }
  </code></pre>
  
  <p>I do an initial load of the listing on page load with:</p>
  
  <pre><code>//for initial loading of data to the bottom of page (through recursive load_data function
  if(action == 'inactive') {
      action = 'active';
      load_data(limit, start,search, tag);
   }  
  </code></pre>
  
  <p>Then if I want to initiate an auto/infinite scroll, I click the checkbox which initiates the code below.  However, the "start" value is "0", where it should have been affected by the Ajax recursive function previously, and start at "15" instead.  I get a repeat of previously posted data, which is not wanted.</p>
  
  <pre><code>//auto scroll checkbox clicked, putting into autoload/autoscroll mode
  $(document).on("change", "#autoscroll", function(){
      autoscroll = this.checked;
      if(autoscroll == true){checked = 'checked';}else{checked = '';}
      console.log(start);
      load_data(limit, start, search, tag);
  });
  </code></pre>
  
  <p>Then auto/infinite scroll works as follows.  The "start" variable is continually updated successfully, but probably within the loop, rather than the recursive Ajax part.</p>
  
  <pre><code>//autoload portion.  when scrolling reaches bottom of screen, triggers another load of data      
  $(window).scroll(function(){
      if(autoscroll == true){
          if($(window).scrollTop() + $(window).height() &gt; $("#load_data").height() &amp;&amp; action == 'inactive' &amp;&amp; button_name != 'End of Data'){  
              action = 'active';
              start = start + limit;
              //load_data(limit, start, search, tag);
              setTimeout(function(){
               load_data(limit, start, search, tag);
              }, 500);
              console.log('scroll function called!');
          }
      }
  });
  </code></pre>
  
  <p>Bottom line question - I would like to use the global variable "start" and have it changed by the recursive function's Ajax success function.  How can this be achieved?</p>