[英]How run function in .scroll() event after ajax call is finish?
我已经准备好一个内部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
)
非常感谢,对不起我的英语
基本上,如果您想在请求完成后运行某些内容,可以将其放入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
}
$ .ajax返回一个可以在滚动事件处理程序中检查的承诺:
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
}
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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.