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

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

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

Answer 1

你使用j来延迟不对,因为j是存在重复的情况的;
你可以定义多一个自增的变量x
var x=0;

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++
    }
}