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

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