我想附加一个元素并立即更新。 console.log（）按预期显示数据，但append（）在for循环完成之前不执行任何操作，然后立即将其全部写入。
index.html的：
... <body> <p>Page loaded.</p> <p>Data:</p> <div id="Data"></div> </body>test.js：
$(document).ready(function() { for( var i=0; i<5; i++ ) { $.ajax({ async: false, url: 'server.php', success: function(r) { console.log(r); //this works $('#Data').append(r); //this happens all at once } }); } });server.php：
<?php sleep(1); echo time()."<br />"; ?>在for循环完成之后，页面甚至不会呈现。 在运行javascript之前，它至少应该首先呈现HTML吗？
I'd like to append to an element and have it update immediately. console.log() shows the data as expected but append() does nothing until the for loop has finished and then writes it all at once.
index.html:
... <body> <p>Page loaded.</p> <p>Data:</p> <div id="Data"></div> </body>test.js:
$(document).ready(function() { for( var i=0; i<5; i++ ) { $.ajax({ async: false, url: 'server.php', success: function(r) { console.log(r); //this works $('#Data').append(r); //this happens all at once } }); } });server.php:
<?php sleep(1); echo time()."<br />"; ?>The page doesn't even render until after the for loop is complete. Shouldn't it at least render the HTML first before running the javascript?
最满意答案
如果切换到async: true ，则在添加数据时屏幕将能够更新。
$(document).ready(function() { var cntr = 0; // run 5 consecutive ajax calls // when the first one finishes, run the second one and so on function next() { $.ajax({ async: true, url: 'server.php', success: function(r) { console.log(r); //this works $('#Data').append(r); //this happens all at once ++cntr; if (cntr < 5) { next(); } } }); } next(); });如果你坚持使用async: false （这通常是可怕的），那么你可以在每个ajax调用之间放一个简短的setTimeout() ，屏幕会在超时期间更新。
还有一些黑客通过访问某些CSS属性“可能”导致屏幕更新（无保证），这些属性只能在HTML布局是最新的时才能计算出来，这可能会导致浏览器显示最新的更改。 我说“可能”，因为这不是规范，只是在一些浏览器中观察行为。 您可以在此处阅读有关此选项的更多信息
在任何情况下，因为你已经在使用ajax调用，所以在这里解决这个问题的最好方法是使用async: true并将你的循环结构更改为可以使用async ajax调用的结构（正如我在我的示例中所示） ）。
If you switch to async: true, then the screen will be able to update as you append data.
$(document).ready(function() { var cntr = 0; // run 5 consecutive ajax calls // when the first one finishes, run the second one and so on function next() { $.ajax({ async: true, url: 'server.php', success: function(r) { console.log(r); //this works $('#Data').append(r); //this happens all at once ++cntr; if (cntr < 5) { next(); } } }); } next(); });If you insist on using async: false (which is generally horrible), then you could put a short setTimeout() between each ajax call and the screen would update during the timeout.
There are also some hacks that "may" cause the screen to update (no guarantees) by accessing certain CSS properties that can only be calculated when the HTML layout is up-to-date which may causes the browser to display the latest changes. I say "may" because this is not by specification, only an observation of behavior in some browsers. You can read more about this option here.
In any case, since you're already using ajax calls, the best way to solve this here is to use async: true and change your loop construct to one that will work with the async ajax call (as I've shown in my example).
如何让jquery在循环中的每个ajax调用之后立即附加输出(How to get jquery to append output immediately after each ajax call in a loop)我想附加一个元素并立即更新。 console.log（）按预期显示数据，但append（）在for循环完成之前不执行任何操作，然后立即将其全部写入。
index.html的：
... <body> <p>Page loaded.</p> <p>Data:</p> <div id="Data"></div> </body>test.js：
$(document).ready(function() { for( var i=0; i<5; i++ ) { $.ajax({ async: false, url: 'server.php', success: function(r) { console.log(r); //this works $('#Data').append(r); //this happens all at once } }); } });server.php：
<?php sleep(1); echo time()."<br />"; ?>在for循环完成之后，页面甚至不会呈现。 在运行javascript之前，它至少应该首先呈现HTML吗？
I'd like to append to an element and have it update immediately. console.log() shows the data as expected but append() does nothing until the for loop has finished and then writes it all at once.
index.html:
... <body> <p>Page loaded.</p> <p>Data:</p> <div id="Data"></div> </body>test.js:
$(document).ready(function() { for( var i=0; i<5; i++ ) { $.ajax({ async: false, url: 'server.php', success: function(r) { console.log(r); //this works $('#Data').append(r); //this happens all at once } }); } });server.php:
<?php sleep(1); echo time()."<br />"; ?>The page doesn't even render until after the for loop is complete. Shouldn't it at least render the HTML first before running the javascript?
最满意答案
如果切换到async: true ，则在添加数据时屏幕将能够更新。
$(document).ready(function() { var cntr = 0; // run 5 consecutive ajax calls // when the first one finishes, run the second one and so on function next() { $.ajax({ async: true, url: 'server.php', success: function(r) { console.log(r); //this works $('#Data').append(r); //this happens all at once ++cntr; if (cntr < 5) { next(); } } }); } next(); });如果你坚持使用async: false （这通常是可怕的），那么你可以在每个ajax调用之间放一个简短的setTimeout() ，屏幕会在超时期间更新。
还有一些黑客通过访问某些CSS属性“可能”导致屏幕更新（无保证），这些属性只能在HTML布局是最新的时才能计算出来，这可能会导致浏览器显示最新的更改。 我说“可能”，因为这不是规范，只是在一些浏览器中观察行为。 您可以在此处阅读有关此选项的更多信息
在任何情况下，因为你已经在使用ajax调用，所以在这里解决这个问题的最好方法是使用async: true并将你的循环结构更改为可以使用async ajax调用的结构（正如我在我的示例中所示） ）。
If you switch to async: true, then the screen will be able to update as you append data.
$(document).ready(function() { var cntr = 0; // run 5 consecutive ajax calls // when the first one finishes, run the second one and so on function next() { $.ajax({ async: true, url: 'server.php', success: function(r) { console.log(r); //this works $('#Data').append(r); //this happens all at once ++cntr; if (cntr < 5) { next(); } } }); } next(); });If you insist on using async: false (which is generally horrible), then you could put a short setTimeout() between each ajax call and the screen would update during the timeout.
There are also some hacks that "may" cause the screen to update (no guarantees) by accessing certain CSS properties that can only be calculated when the HTML layout is up-to-date which may causes the browser to display the latest changes. I say "may" because this is not by specification, only an observation of behavior in some browsers. You can read more about this option here.
In any case, since you're already using ajax calls, the best way to solve this here is to use async: true and change your loop construct to one that will work with the async ajax call (as I've shown in my example).
发布评论