javascript - 排序算法演示中的暂停时间没有按照预想的方式起作用
本文介绍了javascript - 排序算法演示中的暂停时间没有按照预想的方式起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我在做一个前端入门的练习，其中有一个task要求如下：
在页面上模拟一个队列，队列的每个元素是一个数字，点击添加按钮后用柱状图高度的形式表现出来
限制输入的数字在10-100
队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来
做到排序功能的时候我准备先实现一个简单的冒泡排序过程，需要一个类似于sleep()的方法一步一步展现冒泡过程，我在论坛上找了一个如下所示的实现方式：
function sleep(d){
for(var t = Date.now();Date.now() - t <= d;);
}
但运行结果并不如我所预期的是每一个循环都展现出来，而是在总的暂停时间过去后刷新一次页面，展示出排序结果，求指点，谢谢，全部代码如下：
html：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 1_18</title>
<style>
.list-block{
display:inline-block;
background-color:red;
color:white;
width:18px;
text-align:center;
line-height:30px;
margin:1px;
}
#list{
margin-top:2px;
}
</style>
</head>
<body>
<div>
<input type="text" name="num" id="input-label" />
<input type="button" value="右侧入" id="push-right" />
<input type="button" value="右侧出" id="pop-right" />
<input type="button" value="左侧入" id="push-left" />
<input type="button" value="左侧出" id="pop-left" />
<input type="button" value="排序" id="sort" />
</div>
<div id="list"></div>
<script src="scripts/task.js"></script>
</body>
</html>
script.js：
let list = document.querySelector("#list"); //获取队列父元素
function sleep(d){ //暂停函数
for(var t = Date.now();Date.now() - t <= d;);
}
function bubbleSort(){ //冒泡排序
let blockArr = list.childNodes; //获取柱子队列数组
let arrLength = blockArr.length; //获取数组长度，优化for循环
for(let i=0;i<arrLength;i++){ //正向遍历
for(let j=arrLength - 1;j>i;j--){ //从数组尾部开始遍历，把较小的元素往前移
if(blockArr[j].style.height < blockArr[j - 1].style.height){ //当后一元素比前一元素小时
//setTimeout(function(){list.insertBefore(blockArr[j],blockArr[j - 1])},500); 最开始想要实现暂停的方式
sleep(500); //暂停500毫秒
list.insertBefore(blockArr[j],blockArr[j - 1]); //交换元素
}
}
}
}
function isLegal(num){ //输入数字范围判断
if(num >= 10 && num <= 100)
return true;
else
return false;
}
function getArrLength(){ //队列长度范围判断
let blockArr = document.querySelectorAll(".list-block");
if(blockArr.length <= 60){
return false;
}else{
return true;
}
}
function rightInput(){ //队尾插入元素
let num = document.querySelector("#input-label").value; //获取输入值
console.log(parseInt(num)); //测试输出，下同
console.log(!isNaN(num));
if(getArrLength()){ //判断队列长度是否超长
alert("元素数量超过限制");
}else if(!isNaN(num) && isLegal(num)){ //输入数字检测
let newBlock = document.createElement("div"); //新建柱子div
newBlock.setAttribute('class','list-block'); //添加样式
newBlock.style.height = num; //设置高度属性
list.appendChild(newBlock); //添加为#list元素的子节点
}else{
alert("请输入10-100之间的数字！"); //弹出提示
}
}
function rightPop(){ //队尾出队列
alert(list.lastChild.style.height); //按照要求弹出删除元素的长度
//console.log(list.lastChild..style.height);
list.removeChild(list.lastChild); //删除队尾元素
}
function leftInput(){ //队首入队列
let num = document.querySelector("#input-label").value;
console.log(parseInt(num));
console.log(!isNaN(num));
if(getArrLength()){
alert("元素数量超过限制");
}else if(!isNaN(num) && isLegal(num)){
let newBlock = document.createElement("div");
newBlock.setAttribute('class','list-block');
newBlock.style.height = num;
list.insertBefore(newBlock,list.childNodes[0]);
}else{
alert("请输入10-100之间的数字！");
}
}
function leftPop(){ //队首出队列
alert(list.firstChild.style.height);
//console.log(list.lastChild..style.height);
list.removeChild(list.firstChild);
}
function init() {
let pushRight = document.querySelector("#push-right"); //绑定右侧入按钮点击事件
pushRight.addEventListener("click",rightInput);
let popRight = document.querySelector("#pop-right"); //绑定右侧出按钮点击事件
popRight.addEventListener("click",rightPop);
let pushLeft = document.querySelector("#push-left"); //绑定左侧入按钮点击事件
pushLeft.addEventListener("click",leftInput);
let popLeft = document.querySelector("#pop-left"); //绑定右侧出按钮点击事件
popLeft.addEventListener("click",leftPop);
list.addEventListener("click",function(e){ //单击柱子本身删除柱子事件代理
if(e.target && e.target.className == "list-block")
list.removeChild(e.target);
});
let sortBubble = document.querySelector("#sort"); //绑定排序按钮事件
sortBubble.addEventListener("click",bubbleSort);
}
/**
* 初始化函数
*/
init();解决方案
日经问题，请看这里：
当我用js给元素添加className时，浏览器发生了什么？
你的代码不怎么好看，我给你重写了一遍，你参考着看看吧：
https://jsfiddle.net/podya3ap/
这篇关于javascript - 排序算法演示中的暂停时间没有按照预想的方式起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
