Javascript Java脚本排序算法可视化工具

k=[]
len=100；
时间=真
cont=document.getElementsByClassName（“cont”）[0]；
cont.innerHTML=“”；
for（设i=0；ik[j+1]）{
设tmp=k[j]；
k[j]=k[j+1]；
k[j+1]=tmp；
}
cont.innerHTML=“”；
for（设p=0；p

.cont{
宽度：100%；
高度：900px；
显示：块；
背景颜色：粉红色；
填充：0px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-ms柔性线组件：中心；
对齐内容：居中；}
.连续块{
显示：内联块；
宽度：10px；
保证金：自动1px；
背景色：红色；
字号：5px；
底部：0px；}

重置数组
气泡排序

您有重叠的

设置超时

计时器，并且有一批计时器正在计划中。您只希望在有更改要显示时返回浏览器，并且只希望显示一次给定的更改

由于您使用的是ES2015+，我可能会使用一个生成器函数来进行排序，当某些内容发生变化时会产生：

function *sortGen() {
    for (let i = 0; i < len; ++i) {
        for (let j = 0; j < len; ++j) {
            if (k[j] > k[j + 1]) {
                let tmp = k[j];
                k[j] = k[j + 1];
                k[j + 1] = tmp;
                yield j; // *** Yield to caller, saying what changed
            }
        }
    }
}

（你可以把它做成一个异步生成器，并使用

来等待

循环，但我不认为它能给你带来多少好处。）

这里有一个活生生的例子；我还在代码中加入了一些注释，并提出了其他建议：

“严格使用”//***使用严格模式
//***声明您的变量（旧代码依赖于隐式全局变量的恐怖，它
//严格模式修正）
设k=[]；//**始终使用分号（或始终依赖ASI）
设len=100；
让时间=真实；
const cont=document.getElementsByClassName（“cont”）[0]；
//***不要重复代码，只需使用“重置”`
重置（）；
函数重置（）{
k=[]；
//***切勿在`innerHTML'上使用+=`
设html=“”；
for（设i=0；ik[j+1]）{
设tmp=k[j]；
k[j]=k[j+1]；
k[j+1]=tmp；
让出j；//***让出给打电话的人，说出发生了什么变化
}
}
}
}
函数bubble（）{
const gen=sortGen（）；
勾选（）；
函数tick（）{
const result=gen.next（）；
如果（！result.done）{
//***无需重新创建所有元素，只需重新排列已交换的元素即可
const el=cont.children[result.value]；
const next=el.nextElementSibling；
el.parentElement.insertBefore（下一步，el）；
requestAnimationFrame（勾号）；
}
}
}

.cont{
宽度：100%；
高度：900px；
显示：块；
背景颜色：粉红色；
填充：0px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-ms柔性线组件：中心；
对齐内容：居中对齐；
}/****不要在行尾隐藏结束}*/
.连续块{
显示：内联块；
宽度：10px；
保证金：自动1px；
背景色：红色；
字号：5px；
底部：0px；
}/****不要在行尾隐藏结束}*/

重置数组
气泡排序

遗憾的是：-（你有重叠的超时，这似乎有问题。你只需要一个

setTimeout

到浏览器并允许它绘制。你可能会发现在内部循环中生成的生成器函数工作得更好：你应该在计时器循环中调用生成器的

next

。

function bubble() {
    const gen = sortGen();
    tick();

    function tick() {
        const result = gen.next();
        if (!result.done) {
            // *** No need to recreate all the elements, just reorder the ones that got swapped
            const el = cont.children[result.value];
            const next = el.nextElementSibling;
            el.parentElement.insertBefore(next, el);
            requestAnimationFrame(tick);
        }
    }
}