CODEWITHSUNDEEP
javascriptjqueryajaxasynchronous.when
Borja
Borja

Reputation: 3551

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

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

Upvotes: 1

Views: 2011

Answers (3)

Franceso Russo
Franceso Russo

Reputation: 53

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
}

Upvotes: 1

Andrey
Andrey

Reputation: 4050

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
}

Upvotes: 2

schellmax
schellmax

Reputation: 6094

$.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
}

Upvotes: 1

Related Questions