Javascript /jquery每次迭代后循环执行函数

javascript/jquery loop execute function after every iteration

本文关键字：循环 执行 函数 迭代 jquery Javascript      更新时间：2023-09-26
var dagaData = ['Manok', 'Pusa', 'Daga', 'Ibon', 'Aso'];
$('#clicktest').on('click', function() {
    $.each(dagaData, function(index, item) {
        executeData(item);
        alert(item);
    });
});
function executeData(item) {
    var items = $("<div></div>").text(item);
    $('#pangtest').append(items);
}

是否有可能在每次迭代中执行函数?

现在，当我运行上面的代码时，它在追加发生之前完成了所有的迭代。

这就是为什么我添加了alert来查看每个alert是否附加在每次迭代后。

上面代码的输出:alert('Manok'), alert('Pusa') ,alert('Daga'), alert('Ibon'), alert('Aso')执行append.

我想达到的是alert('manok') append, alert('Pusa') append, alert('Daga') append, alert('Ibon') append, alert('Aso') append。

一般来说，虽然每次调用.append()时DOM都会更新，但在整个JS函数完成之前，浏览器实际上不会重新绘制屏幕。(虽然一些浏览器会在警报打开时重新绘制，这就是为什么使用alert()进行调试是一个坏主意:它可以以调用console.log()的方式巧妙地改变行为。)

您可以通过使用基于setTimeout的伪循环来解决这个问题-在超时之间浏览器然后有机会重新绘制:

var dagaData = ['Manok', 'Pusa', 'Daga', 'Ibon', 'Aso'];
$('#clicktest').on('click', function() {
  var i = 0;  
  (function doNext() {
    var item = dagaData[i];
    executeData(item);
    alert(item);
    if (++i < dagaData.length)
      setTimeout(doNext, 5);
  })();
});
function executeData(item) {
    var items = $("<div></div>").text(item);
    $('#pangtest').append(items);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="clicktest">Test</button>
<div id="pangtest"></div>

或者只是使用原始的$.each()循环，循环的内容包装在超时中，正如Bnrdo的答案。但是我更喜欢在前一个超时完成后再调度每个超时，因为这样可以保证执行的顺序。

用setTimeout换行

$.each(dagaData, function(index, item) {
   setTimeout(function() {
      executeData(item);
      alert(item);
   }, 1);
});
相关文章：