Question

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('Manok'), alert('Pusa') ,alert('Daga'), alert('Ibon'), alert('Aso')执行追加。

我想要实现的是alert('manok') append, alert('Pusa') append, alert('Daga') append, alert('Ibon') append, alert('Aso') append。

提前致谢。

Answer 1

将它们包裹在setTimeout

中

$.each(dagaData, function(index, item) {
   setTimeout(function() {
      executeData(item);

      alert(item);
   }, 1);
});

Answer 2

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

你可以通过使用基于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);
}

或者根据Bnrdo's answer使用原始<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>循环，并将循环内容包装在超时中。但是我更愿意等到每个超时只能在前一个超时完成之后，因为这样可以保证执行的顺序。

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

2 个答案: