javascript - js for循环中如何延迟执行?
本文介绍了javascript - js for循环中如何延迟执行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
想用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);
}
}
}
不知道有什么方法可以实现吗
解决方案
你使用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++
}
}
这篇关于javascript - js for循环中如何延迟执行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文