jQueryAjax在进程中调用时屏幕不刷新
我有两个屏幕刷新问题,可能(也可能不)相关。我可以清楚地再现的一个例子是进行一系列ajax调用。在每次调用之间,我更新jQuery对话框中的文本以显示进度。在流程结束时,我隐藏了对话框 当我使用调试面板在Chrome中运行此代码并在每次ajax调用之前或之后放置断点时,对话框会正确更新。如果我只是让代码运行而不中断,屏幕根本不会刷新 我尝试在每个ajax调用之间引入等待循环,但这并不能解决问题。以下是代码的编辑版本:jQueryAjax在进程中调用时屏幕不刷新,jquery,ajax,Jquery,Ajax,我有两个屏幕刷新问题,可能(也可能不)相关。我可以清楚地再现的一个例子是进行一系列ajax调用。在每次调用之间,我更新jQuery对话框中的文本以显示进度。在流程结束时,我隐藏了对话框 当我使用调试面板在Chrome中运行此代码并在每次ajax调用之前或之后放置断点时,对话框会正确更新。如果我只是让代码运行而不中断,屏幕根本不会刷新 我尝试在每个ajax调用之间引入等待循环,但这并不能解决问题。以下是代码的编辑版本: $('#saving').show(); $('#savingSpan').t
$('#saving').show();
$('#savingSpan').text('Saving Analysis');
$('#savingReport').text('Saving Header: ');
$('#savingInputs').text('Saving Inputs: ');
$('#savingResults').text('Saving Results: ');
$('#savingComplete').text('Doing Cleanup: ');
wait(250);
$('#savingReport').append('Started...');
var status = saveReport();
$('#savingReport').append('Complete.');
wait(250);
$('#savingInputs').append('Started....');
status = saveInputs();
$('#savingInputs').append('Complete.');
wait(250);
$('#savingResults').append('Started....');
status = saveResults();
$('#savingResults').append('Complete.');
wait(250);
$('#savingComplete').append('Started....');
status = saveComplete();
$('#savingComplete').append('Complete.');
$('#saving').hide();
另一个问题是,当我的页面最初加载时,页面的主要部分是空白的,直到我将鼠标放在页面的该部分上。然后我运行鼠标的区域会正确显示。您需要等待ajax调用完成。下面的代码模拟ajax调用:
var foo = 1;
setTimeout(function(){
foo = 2;
}, 250);
console.log(foo); //1
您需要的是回调函数,以确保ajax调用完成:
function ajaxDemo(success){
setTimeout(function(){
foo = 2;
success;
}, 250);
}
var foo = 1;
ajaxDemo(function(){
console.log(foo);
});
因为您用jQuery
标记了问题,所以可以这样做(假设版本>=1.5):
希望这有帮助。如果您有任何问题,请告诉我。Ajax请求是异步执行的。假设它们将在任何特定时间内完成是不合理的。约翰的方法是有效的。我已经确定这是一个Chrome问题。该代码在FireFox和OperaCan中运行良好。您是否将用户限制为Chrome以外的浏览器?Chrome拥有近一半的市场份额,几乎是下一代浏览器的两倍。。。我正在执行两个连续的Ajax调用。第一个完成,然后启动第二个。直到第二次刷新完成,屏幕才会刷新。而且。。。屏幕在FF中刷新得很好。
var ajaxCall1 = $.ajax({ /* ... your ajax code ... */ }),
ajaxCall2 = $.ajax({ /* ... your ajax code ... */ }),
ajaxCall3 = $.ajax({ /* ... your ajax code ... */ });
$.when(ajaxCall1, ajaxCall2, ajaxCall3).then(function(d1, d2, d3){
console.log(d1); //data from first ajax call
console.log(d2); //data from second ajax call
//etc...
}).fail(function() {
console.log('something went wrong in at least one of the ajax calls');
});