javascript - js for循环中如何延迟执行？-PHP中国語ネットワークQ&A

想用js实现冒泡排序的可视化，但是for循环中的语句块没法延迟执行，导致没法做成动画效果。

代码如下所示：

for (var i = 0; i < childNodes.length; i++) { for (var j = 0; j < childNodes.length - i -1; j++) { if (childNodes[j].firstChild.nodeValue > childNodes[j+1].firstChild.nodeValue) { temp = childNodes[j+1]; parentNode.replaceChild(childNodes[j],childNodes[j+1]); parentNode.insertBefore(temp,childNodes[j]); } } }

有尝试用下面的方法设置延迟执行，但是这样的话，外层的for循环没有执行,导致内存for循环执行一次后就结束了...

for (var i = 0; i < childNodes.length; i++) { for (var j = 0; j < childNodes.length - i -1; j++) { (function(j){ setTimeout(function(){ if (childNodes[j].firstChild.nodeValue > childNodes[j+1].firstChild.nodeValue) { temp = childNodes[j+1]; parentNode.replaceChild(childNodes[j],childNodes[j+1]); parentNode.insertBefore(temp,childNodes[j]); } },j*1000); })(j); } } }

不知道有什么方法可以实现吗

for (var i = 0; i < childNodes.length; i++) { for (var j = 0; j < childNodes.length - i -1; j++) { (function(j){ setTimeout(function(){ if (childNodes[j].firstChild.nodeValue > childNodes[j+1].firstChild.nodeValue) { temp = childNodes[j+1]; parentNode.replaceChild(childNodes[j],childNodes[j+1]); parentNode.insertBefore(temp,childNodes[j]); } },x*1000); })(j); x++ } }