求助js程序中延时效果实现。

luckczj 2018-06-27 09:31:14
一般程序经常用setTimeout或者setInterval来实现延时或者间隔执行，平常也经常用。最近编一个js的汉诺塔却遇到了问题，各种百度都没有找到解决方法，不加延时程序，则程序执行太快，点开始就看到结束了看不到中间过程动画。用了网上一些方法要么程序终止执行，要么确实等待了但是画面没有更新，还是显示最后一步的效果。
只好来这里麻烦各位帮想想办法。
程序源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>递归案例</title>
<style>
.hnt{
width:300px;
height:120px;
background:#9FF;
border:#30F thin dotted;
text-align:center;
float:left;
}
</style>
<script type="text/javascript">
var level=5;//层数
var delay=500;//延迟
var data=["1","222","33333","4444444","555555555"];
var a=new Array(5),b=new Array(5),c=new Array(5);
function init()
{
for(var i=0;i<data.length;i++)//小数在上，大数在下
{
a[level-1-i]=data[i];
b[i]="";
c[i]="";
}
viewHnt();
hnt(level,a,b,c);
}
function hnt(n,A,B,C)//移动n从哪里，经过哪里，到达哪里.n为柱子数组的有效长度
{
if(n==1){
move(A,C);
}
else{
hnt(n-1,A,C,B);//把n-1个盘子先移动到passP
move(A,C);
hnt(n-1,B,A,C);
}
}
function move(start,end)
{
var h1=getHeight(start);
var h2=getHeight(end);
end[h2]=start[h1-1];
start[h1-1]="";
viewHnt();

}
function getHeight(sz)
{
var h=0;
for(var i=0;i<level;i++)
{
if(sz[i]!="")h++;
}
return h;
}
function viewHnt()
{
var diva=document.getElementById("A");
var divb=document.getElementById("B");
var divc=document.getElementById("C");
var bottom="===========";
var stra="",strb="",strc="";
for(var i=0;i<level;i++)
{
var v=a[i]==""?"|":a[i];
stra=v+"<br/>"+stra;
var v1=b[i]==""?"|":b[i];
strb=v1+"<br/>"+strb;
var v2=c[i]==""?"|":c[i];
strc=v2+"<br/>"+strc;
}
diva.innerHTML=stra+bottom;
divb.innerHTML=strb+bottom;
divc.innerHTML=strc+bottom;
}
function delay(ms)//程序会中断
{
var t=Date.now();
while(Date.now()-t<=ms);
}
function sleep(ms)//UI会卡住，直到运行完才显示。
{
var begin = new Date();
var exitTime = begin.setMilliseconds(begin.getMilliseconds()+ms);
var str="";
while (true) {
now = new Date();
if (now > exitTime)
return;
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p> <input type="button" name="button" id="button" value="开始汉诺塔" onclick="init()"/>
</p>
<div id="A" class="hnt"></div>
<div id="B" class="hnt"></div>
<div id="C" class="hnt"></div>

</form>
</body>
</html>

...全文
391 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
ambit_tsai-微信 2018-06-28
  • 打赏
  • 举报
 回复
引用 3 楼 ambit_tsai 的回复:
Promise与setTimeout相结合可以实现延迟功能，并且不会阻塞主进程，导致页面卡住。
给你个栗子看下


var p = new Promise(function(resolve, rejectA){

	setTimeout(function(){

		console.log(2);

		resolve();

	}, 1000);

	console.log(1);

});



p.then(function(){  // 等待前一个resolve调用后才执行

	console.log(3);

});

ambit_tsai-微信 2018-06-28
  • 打赏
  • 举报
 回复
Promise与setTimeout相结合可以实现延迟功能，并且不会阻塞主进程，导致页面卡住。 给你个栗子看下 

var p = new Promise(function(resolve, rejectA){
	setTimeout(function(){
		console.log(2);
		resolve();
	}, 1000);
	console.log(1);
});

p.then(function(){  // 等待前一个resolve调用后才执行
	console.log(3);
});
Logerlink 2018-06-28
  • 打赏
  • 举报
 回复
汉诺塔 完成的动画过程吗???
给一个参考的
一个是通过animate的，一个是通过delay的
https://zhidao.baidu.com/question/306316666313795924.html
天际的海浪 2018-06-28
  • 打赏
  • 举报
 回复
注意：我这种方法不是暂停延时程序执行。只是推迟每一次更新显示的时间。
是在程序执行完之后再慢慢的把每一次更新显示出来。
js语言在递归算法中是很难延时程序的。
天际的海浪 2018-06-28
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>递归案例</title>

<style>

.hnt{

	width:300px;

	height:120px;

	background:#9FF;

	border:#30F thin dotted;

	text-align:center;

	float:left;

}

</style>

<script type="text/javascript">

var level=5;//层数

var delay=500;//延迟

var sdelay = 0;

var data=["1","222","33333","4444444","555555555"];

var a=new Array(5),b=new Array(5),c=new Array(5);

function init()

{

	for(var i=0;i<data.length;i++)//小数在上，大数在下

	{

		a[level-1-i]=data[i];

		b[i]="";

		c[i]="";

	}

	viewHnt();

	hnt(level,a,b,c);

}

function hnt(n,A,B,C)//移动n从哪里，经过哪里，到达哪里.n为柱子数组的有效长度

{

	if(n==1){

		move(A,C);

	}

	else{

		hnt(n-1,A,C,B);//把n-1个盘子先移动到passP

		move(A,C);

		hnt(n-1,B,A,C);

	}

}

function move(start,end)

{

	var h1=getHeight(start);

	var h2=getHeight(end);

	end[h2]=start[h1-1];

	start[h1-1]="";

	viewHnt();

}

function getHeight(sz)

{

	var h=0;

	for(var i=0;i<level;i++)

	{

		if(sz[i]!="")h++;

	}

	return h;

}

function viewHnt()

{

	var diva=document.getElementById("A");

	var divb=document.getElementById("B");

	var divc=document.getElementById("C");

	var bottom="===========";

	var stra="",strb="",strc="";

	for(var i=0;i<level;i++)

	{

		var v=a[i]==""?"|":a[i];

		stra=v+"<br/>"+stra;

		var v1=b[i]==""?"|":b[i];

		strb=v1+"<br/>"+strb;

		var v2=c[i]==""?"|":c[i];

		strc=v2+"<br/>"+strc;

	}

	setTimeout(function(){

		diva.innerHTML=stra+bottom;

		divb.innerHTML=strb+bottom;

		divc.innerHTML=strc+bottom;

	}, sdelay);

	sdelay+=delay;

}



</script>

</head>



<body>

<form id="form1" name="form1" method="post" action="">

  <p> <input type="button" name="button" id="button" value="开始汉诺塔" onclick="init()"/>

  </p>

  <div id="A" class="hnt"></div>

  <div id="B" class="hnt"></div>

  <div id="C" class="hnt"></div>



</form>

</body>

</html>
luckczj 2018-06-27
  • 打赏
  • 举报
 回复

运行效果，5层的，答案是正确的，就是不知道怎么样让它慢下来。
JavaScript从入门到精通2016版教学视频
讲解JS基础；类型转换，对象创建；窗口之间传参；3种对话框函数；延时函数；获取，创建，删除与显示标签；显示隐藏页面内容；document、location、history等对象的使用；
JavaScript 图片滑动展示效果javascript
javascript 图片滑动展示效果 更新版本:slideview 图片滑动（扩展/收缩）展示效果 看到jquery实例：图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个。 其中的难点在于怎么设计各个滑动对象进行想要的滑动。 一开始我想的是利用滑动对象的宽度的变化来实现滑动, 但实行起来发现这个只能在理想状态下实现,一般实现起来很困难。 所以还是参照了实例中的方法,
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的，但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使（下面说明）所以我们这个时候会考虑去使用微信官方提供的wx.createAnimation  API来创建动画。接下来我带各位小伙伴如何让 transition 属性在这种需求中好使起来，下面上代码index.js page({  ...
微信小程序资源汇总
微信小程序汇总（10月16日更新小程序100+个教程或资讯与50+个Demo） 1：微信小程序官方工具：https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 2：微信小程序简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：微信小程序设计指南：http...
【已解决】企业微信 JS-SDK 安卓设备正常，但无法在 IOS设备上使用
虽然问题得以解决，却没有找到根本原因，或许只是误打误撞解决了，说不定未来会作为隐患爆发。如果大家有知道具体原因或者更好方法的，欢迎大家留言讨论。（完）
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章