0

我有两个可能（或可能不）相关的屏幕刷新问题。我可以清楚地重现的一个涉及进行一系列 ajax 调用。在每次调用之间，我都会更新 jQuery 对话框中的文本以显示进度。在该过程结束时，我隐藏了对话框。

当我使用调试面板在 Chrome 中运行此代码并在每个 ajax 调用之前或之后放置一个断点时，对话框会正确更新。如果我只是让代码运行而不中断，则屏幕根本不会刷新。

我尝试在每个 ajax 调用之间引入等待循环，但这并不能解决问题。这是代码的编辑版本：

$('#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();

另一个问题是，当我的页面最初加载时，它的主要部分是空白的，直到我将鼠标悬停在页面的该部分上。然后我将鼠标移过的区域正确显示。

4

1 回答 1

1

您需要等待 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）：

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');
});

希望这可以帮助。如果您有任何问题，请告诉我。

于 2013-05-15T19:11:37.637 回答