js for循环中如何延迟执行？

Question

想用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循环执行一次后就结束了...

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

Answer 1

你使用j来延迟不对,因为j是存在重复的情况的;你可以定义多一个自增的变量xvar x=0;for (var i = 0; i < childNodes.length; i++) {&nbsp; &nbsp; for (var j = 0; j < childNodes.length - i -1; j++) {&nbsp; &nbsp; &nbsp; &nbsp; (function(j){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (childNodes[j].firstChild.nodeValue > childNodes[j+1].firstChild.nodeValue) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; temp = childNodes[j+1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parentNode.replaceChild(childNodes[j],childNodes[j+1]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parentNode.insertBefore(temp,childNodes[j]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },x*1000);&nbsp; &nbsp; &nbsp; &nbsp; })(j);&nbsp; &nbsp; &nbsp; &nbsp; x++&nbsp; &nbsp; }}