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

jquery ajax events
jquery ajax complete example
jquery on scroll event
jquery bind event after ajax
jquery detect ajax request
jquery scroll to element in div
window scroll event jquery
javascript scroll event position

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


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

Is there a way to execte jquery event after ajax callback has been , You can use custom ajax commands for this. Ajax commands are php classes that correspond to a JS function on the server, which the Drupal  Straight getting into what the title says, a call stack is simply a stack that the javascript run-time maintains to go through all the calls defined in the code. The concept is exactly of a stack where the execution starts from the last function entering the stack and goes on till the first function.


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
}

jQuery API Documentation, Register a handler to be called when Ajax requests complete with an error. Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Execute the next function on the queue for the matched elements. Get the current horizontal position of the scroll bar for the first element in the set of​  After the Ajax call I am running a function that uses the variables created in the Ajax call. The function only executes two times. I think that the Ajax call may not have enough time to make the call before the loop starts over.


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
}

.scroll(), A function to execute each time the event is triggered. The scroll event is sent to an element when the user scrolls to a different place in the element. It applies  I want to trigger an ajax request when the user has finished typing in a text box. I don’t want it to run the function on every time the user types a letter because that would result in A LOT of ajax requests, however I don’t want them to have to hit the enter button either.


jQuery: Novice to Ninja: Novice to Ninja, Ajax when your page loads. You'll Endless Scrolling Ajax allows us to grab more content from the server whenever we want. the setTimeout call from the complete event handler. some necessary setup code, and a checkScroll() method which will be called whenever the scroll event fires: call if we're already running! jQuery click function doesn't work after ajax call? [duplicate] Ask Question Asked 6 years, Bootstrap dropdown click event stops working after AJAX call. 0.


jQuery AJAX Events Complete Guide for Beginners and Experts, When there is an AJAX call then the jQuery AJAX Events are fired during How To Implement jQuery Infinite Scroll Feature For Auto Paging. Calling one jQuery function only after another function has run Sometimes it may be nessessary to force one jQuery function to run only after another has finished. To do this you need to use the jQuery deferred method.


How to detect when user scrolls to the bottom of a div, having one or more event to add to the selected elements, and functions to run when the events happens. Example 1: This example alerts You reached the end​  The ajaxComplete() method specifies a function to be run when an AJAX request completes. Note: As of jQuery version 1.8, this method should only be attached to document. Unlike ajaxSuccess(), functions specified with the ajaxComplete() method will run when the request is completed, even it is not successful.