如何在javascript中设置以下快速排序算法的动画？

我试图学习更多关于编程和排序算法的知识，我想用不同高度的div创建一个快速排序算法的动画。我已经创建了排序算法。 运行代码片段将帮助您理解我要做的事情。 这是代码，但排序完成后，它只显示最终结果，而不是整个过程：

函数createColumns（）{
$（'.column'）.remove（）；
var content=$（“#content”）；
var columnNumber=$（'input:text'）.val（）；
var columnWidth=（（content.width（）*99/100）/columnNumber）+'px'；
对于（变量i=0；i1）{
索引=分区（列、左、右）；
如果（左<（索引-1））{
快速排序（列，左，（索引-1））；
}
如果（索引<右）{
快速排序（列、索引、右侧）；
}
}
返回列；
}
功能分区（列、左、右）{
var pivot=$（列[Math.floor（（右+左）/2）]，
i=左，
j=右；
而（i pivot.height（））{
j--；
}
如果（i虽然它不是很活跃，但是如果您将
快速排序
函数的内部打包成一个setTimeout，并有一个小的延迟（我选择750ms）来查看每个步骤，则可以将排序过程减慢一点


函数createColumns（）{
$（'.column'）.remove（）；
var content=$（“#content”）；
var columnNumber=$（'input:text'）.val（）；
var columnWidth=（（content.width（）*99/100）/columnNumber）+'px'；
对于（变量i=0；i1）{
索引=分区（列、左、右）；
如果（左<（索引-1））{
快速排序（列，左，（索引-1））；
}
如果（索引<右）{
快速排序（列、索引、右侧）；
}
}
返回列；
}, 750);
}
功能分区（列、左、右）{
var pivot=$（列[Math.floor（（右+左）/2）]，
i=左，
j=右；
而（i pivot.height（））{
j--；
}
如果（当我尝试运行代码段时，它一直告诉我的createColumns（））；未定义，您是否忘记在代码段中添加一些代码？代码的执行速度可能非常快，您可以看到动画。请尝试在步骤之间添加某种延迟，例如使用
setTimeout
每一步100毫秒。这可能足以看到结果。我已修复它！@B.crattythy这不是一个错误完整的解决方案，但您可以考虑。在代码< >交换< /代码>中，添加一些代码，将一对索引追加到一个正在运行的列表中。（可以使用通过<代码>参数QuasQue> 和<代码>分区< /代码>或一个更全局变量的参数。运行排序，然后使用此交换列表执行一些动画。与尝试修改算法以合并动画延迟相比，它的干扰性要小得多。当然，我将动画留给您来完成！：-）如果你正在寻找一些参考资料来获得一些指导，我能够找到这个我不敢相信一直以来都这么容易。回答得很好！虽然这个代码片段可以解决这个问题，但确实有助于提高你文章的质量。请记住，你是在为读者回答这个问题，而这些人可能不知道请告诉我您的代码建议的原因。@SzucsEduard如果您还需要其他帮助，请告诉我