运行如何在 ajax 调用完成后在 .scroll() 事件中发挥作用？

Question

我已经准备好一个带有内部 ajax 调用的函数，它从 MySql 数据库中推断值。然后，在 .scroll() 事件中，我有一个函数使用这个值来动画一些 divs.

问题是当 ajax 调用未完成时，有时 .scroll() 是运行。

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
}

我该如何解决这个问题？（我不想用async: false）

非常感谢，抱歉我的英语不好

Answer 1

基本上，如果你想在请求完成后运行一些东西，你可以将它放入 success 回调中。所以对你的代码稍作修改就可以做你想做的事

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
}

编辑

如果您的 ajax 请求运行每次页面加载不止一次，您将需要进行一些修改。

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 您可以在滚动事件处理程序中检查的承诺：

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 解决方案为每个 ajax 调用绑定一个函数来滚动事件。您可以使用全局变量来了解 ajax 调用是否完成，正如您从上面的代码中看到的那样。

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
}

运行如何在 ajax 调用完成后在 .scroll() 事件中发挥作用？

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

javascript

ajax

jquery

asynchronous

.when

运行 如何在 ajax 调用完成后在 .scroll() 事件中发挥作用？

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

javascript

ajax

jquery

asynchronous

.when

运行如何在 ajax 调用完成后在 .scroll() 事件中发挥作用？