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是存在重复的情况的;
你可以定义多一个自增的变量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++

    }

}