Question

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

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

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

有没有办法可以让这个工作，循环调用一个函数，并且每次调用函数时实际执行该函数并执行它的设计目的？

以下代码：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="load_data"></p>

＆＃13;

Answer 1

看起来，在alert停止阻塞并且主线程完成之前，渲染不会发生。当行在Javascript中运行时，test 是同步附加，但用户可以看到的HTML在循环结束之前不会直观地改变。

一种可能性是loadData返回一个立即解析的Promise（在渲染发生的时间之后），以及{{1}的循环每次调用await，如下面的代码段所示。但最好不要使用loadData - 它非常不友好，阻塞（像这样）几乎不是一个好主意。

＆＃13;

alert

＆＃13;

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

＆＃13;

原生<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="load_data"></p>：

会发生同样的行为

＆＃13;

textContent

＆＃13;

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

＆＃13;

Jquery循环调用函数 - 每次调用时都不执行函数

1 个答案: