How run function in .scroll() event after ajax call is finish?

Question

I have at ready a function with inside ajax call that extrapolates values from MySql database. Then, in .scroll() event, i have a function that use thise values to animate some divs .

The problem is that sometimes .scroll() is run when ajax call is not finished.

function values_database(){
    $.ajax({    
     type: "POST",  
     url: 'events.php', 
     dataType:"json",   
     data: {
        dal_mese1: 'example'
     },
     success: function (result) { 
      var return_php = JSON.parse(JSON.stringify(result));  
      values.push(return_php); //VALUES FOR ANIMATIONS
     }
 }

 $(window).scroll(function(){
        var top_window2 = $(window).scrollTop();
        var bottom_window2 = top_window2 + $(window).height();                      
        var top_statistiche = $('#somedivs').offset().top;  
        if(((top_statistiche >= top_window2) && (top_statistiche <= bottom_window2))){  
            animation_somedivs();
        }   
 });

function animation_somedivs(){
//use values global array (with inside value from database, if ajax call is finish before "this" function is run
}

How can i solve this problem ? (I don't want to use async: false )

Thanks a lot and sorry for my english

Answer 1

Basically if you want to run something after request finish, you can put it into success callback. So minor modification of your code can do what you want

function values_database(){
    $.ajax({    
     type: "POST",  
     url: 'events.php', 
     dataType:"json",   
     data: {
        dal_mese1: 'example'
     },
     success: function (result) { 
      var return_php = JSON.parse(JSON.stringify(result));  
      values.push(return_php); //VALUES FOR ANIMATIONS

      $(window).scroll(function(){
        var top_window2 = $(window).scrollTop();
        var bottom_window2 = top_window2 + $(window).height();                      
        var top_statistiche = $('#somedivs').offset().top;  
        if(((top_statistiche >= top_window2) && (top_statistiche <= bottom_window2))){  
            animation_somedivs();
        }   
      });

     }
 }

function animation_somedivs(){
    //use values global array (with inside value from database, if ajax call is finish before "this" function is run
}

Edit

In case if your ajax request runs more than once per page load, you're going to need some modification.

function handle_scroll() {
    var top_window2 = $(window).scrollTop();
    var bottom_window2 = top_window2 + $(window).height();                      
    var top_statistiche = $('#somedivs').offset().top;  
    if(((top_statistiche >= top_window2) && (top_statistiche <= bottom_window2))){  
        animation_somedivs();
    }   
  }
}
function values_database(){
    $.ajax({    
     type: "POST",  
     url: 'events.php', 
     dataType:"json",   
     data: {
        dal_mese1: 'example'
     },
     success: function (result) { 
      var return_php = JSON.parse(JSON.stringify(result));  
      values.push(return_php); //VALUES FOR ANIMATIONS

      $(window).off('scroll', handle_scroll);
      $(window).on('scroll', handle_scroll);

     }
 }

function animation_somedivs(){
    //use values global array (with inside value from database, if ajax call is finish before "this" function is run
}

Answer 2

$.ajax returns a promise you can check for in your scroll event handler:

var promise;
function values_database(){
    promise = $.ajax({    
     type: "POST",  
     url: 'events.php', 
     dataType:"json",   
     data: {
        dal_mese1: 'example'
     },
     success: function (result) { 
      var return_php = JSON.parse(JSON.stringify(result));  
      values.push(return_php); //VALUES FOR ANIMATIONS
     }
 }

 $(window).scroll(function(){
        $.when(promise).then(function(){
            var top_window2 = $(window).scrollTop();
            var bottom_window2 = top_window2 + $(window).height();                      
            var top_statistiche = $('#somedivs').offset().top;  
            if(((top_statistiche >= top_window2) && (top_statistiche <= bottom_window2))){  
                animation_somedivs();
            }
        });

 });

function animation_somedivs(){
//use values global array (with inside value from database, if ajax call is finish before "this" function is run
}

Answer 3

Andrei solution bind a function to scroll event for each ajax call you do. You can use a global variable to know if ajax call is complete, as you can see from code above.

var ajaxCallIsComplete = false;

function values_database(){
$.ajax({    
 type: "POST",  
 url: 'events.php', 
 dataType:"json",   
 data: {
    dal_mese1: 'example'
 },
 success: function (result) { 
  var return_php = JSON.parse(JSON.stringify(result));  
  values.push(return_php); //VALUES FOR ANIMATIONS
  ajaxCallIsComplete = true;
 }
}

 $(window).scroll(function(){
    if (!ajaxCallIsComplete){
        return;
    }
    var top_window2 = $(window).scrollTop();
    var bottom_window2 = top_window2 + $(window).height();                      
    var top_statistiche = $('#somedivs').offset().top;  
    if(((top_statistiche >= top_window2) && (top_statistiche <= bottom_window2))){  
        animation_somedivs();
    }   
});

function animation_somedivs(){
   //use values global array (with inside value from database, if ajax call is finish before "this" function is run
}