Jquery循环调用函数

对Jquery循环进行一些测试，该循环在循环中调用函数3次。 似乎每次在循环中调用该函数，但不执行。 在循环结束时，该函数然后执行3次。 不是我想要的。

为什么每次调用loadData时都不会执行和追加？ 警报只是告诉我每个阶段都是在循环循环时执行的。

我的最终目标是每次调用一个类似的函数，直到它将浏览器窗口填充到屏幕底部，然后停止。 但是，有了这种行为，如果我在循环中检查填充屏幕的条件，它将无法工作，因为当循环搅动时屏幕根本不会填充。

有没有办法让这个工作，循环调用一个函数，每次调用函数实际执行，并按照它的设计去做？

代码如下：

function loadData() {
  alert('loadData function called');
  $("#load_data").append("test");
}
var x = 0;
while (x < 3) {
  x = x + 1;
  alert('X number is: ' + x);
  loadData();
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="load_data"></p> 
  
 
Doing some testing of a Jquery loop which calls a function within the loop 3 times. It seems like the function is called each time in the loop, but does NOT execute. At the end of the loop, the function then executes 3 times. Not what I want.
 
Why does the loadData not execute and append each time it is called? The alerts just tell me that each stage is performed as the loop cycles through.
 
My ultimate objective is to call a similar function each time until it fills the browser window to the bottom of the screen, then stop. But, with this behaviour, if I put a check in the loop for the condition of filled screen, it will not work since the screen will not fill at all as the loop churns.
 
Is there a way I can make this work, where a loop calls a function and the function actually executes each time it is called and do what it was designed to do?
 
Code below:
 
 
 
  
  
function loadData() {
  alert('loadData function called');
  $("#load_data").append("test");
}
var x = 0;
while (x < 3) {
  x = x + 1;
  alert('X number is: ' + x);
  loadData();
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="load_data"></p> 
  
 

                
最满意答案
                
                    
                        
 看起来直到alert停止阻塞并且主线程完成才会进行渲染。 该行在Javascript中运行时同步附加test ，但用户可以看到的HTML在循环结束之前不会在视觉上发生变化。 
 
 一种可能性是loadData返回一个立即解析的Promise （在渲染发生的时间之后），并且循环await loadData每次调用，如下面的代码片段所示。 但最好不要使用alert - 这是非常不友好的用户，阻塞（像这样）几乎不是一个好主意。 
 
 
 
  
  
function loadData() {
  alert('loadData function called');
  $("#load_data").append("test");
  console.log($("#load_data").text());
  return new Promise(resolve => setTimeout(resolve));
}
var x = 0;
(async () => {
  while (x < 3) {
    x = x + 1;
    alert('X number is: ' + x);
    await loadData();
  }
})(); 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="load_data"></p> 
  
 
 
 原生textContent发生相同的行为： 
 
 
 
  
  
const loadDataElm = document.querySelector('#load_data');
function loadData() {
  alert('loadData function called');
  loadDataElm.textContent += 'test';
  console.log(loadDataElm.textContent);
}
var x = 0;
while (x < 3) {
  x = x + 1;
  alert('X number is: ' + x);
  loadData();
  // await loadData();
} 
  
<p id="load_data"></p> 
  
 
It looks like the rendering doesn't occur until the alert stops blocking and the main thread completes. The test is synchronously appended at the time the line runs in the Javascript, but the HTML the user can see doesn't visually change until the loop is finished.
 
One possibility would be for loadData to return a Promise that resolves immediately (right after there's been time for the rendering to take place), and for the loop to await each call of loadData, as in the snippet below. But it would be better not to use alert at all - it's very user unfriendly, and blocking (like this) is almost never a good idea.
 
 
 
  
  
function loadData() {
  alert('loadData function called');
  $("#load_data").append("test");
  console.log($("#load_data").text());
  return new Promise(resolve => setTimeout(resolve));
}
var x = 0;
(async () => {
  while (x < 3) {
    x = x + 1;
    alert('X number is: ' + x);
    await loadData();
  }
})(); 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="load_data"></p> 
  
 
 
The same behavior occurs with the native textContent:
 
 
 
  
  
const loadDataElm = document.querySelector('#load_data');
function loadData() {
  alert('loadData function called');
  loadDataElm.textContent += 'test';
  console.log(loadDataElm.textContent);
}
var x = 0;
while (x < 3) {
  x = x + 1;
  alert('X number is: ' + x);
  loadData();
  // await loadData();
} 
  
<p id="load_data"></p>