setTimeout妙用,可作loading功能,智能化的提示

来源：互联网发布：淘宝店主营在哪里设置编辑：程序博客网时间：2024/05/04 17:21

解述:
示例:setTimeout('input_update()',3000); setTimeout('location.href=index.jsp',3000);
可以见setTimeout主要的两个参数的意义是接js处理函数,后一个是延迟操作的时间设定.
setInterval这个为定时检查的函数

(一)首先第一个例子:setTimeout 实现重复调用:
<input name='input1'></input>
<input name='input2'></input>
<input name='input3'></input>
<script language='javascript'>
var inputAt = 0;
var inputAtD = 0;
var inputTimer;
var inputInterval=1000;
function input_update() {
inputAt++;
inputAtD++;
inputTimer = setTimeout('input_update()',inputInterval);
document.getElementById('input'+inputAt).value = inputAtD;
if(inputAt==3)inputAt=0;
}
input_update();
</script>

(二)setTimeout 实现Loading进度条

<div align = "center" style='width:115px;height:20px;font-size:8pt;padding:2px;border:solid black 1px'>
<span id='progress1'>   </span>
<span id='progress2'>   </span>
<span id='progress3'>   </span>
<span id='progress4'>   </span>
<span id='progress5'>   </span>
<span id='progress6'>   </span>
<span id='progress7'>   </span>
<span id='progress8'>   </span>
<span id='progress9'>   </span>
</div>
<script language='javascript'>
var progressEnd = 9;
var progressColor = 'red';
var progressInterval = 500;
var progressAt = 0;
var progressTimer;

function progress_update() {
progressAt++;
document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
progressTimer = setTimeout('progress_update()',progressInterval);
if(progressAt==9)
{
progressAt=0;
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
}
}

progress_update();
</script>

(三)setTimeout 实现智能化的提示
<input name='input1'></input>
<script language='javascript'>
var inputAt1 = "正在操作中....";//"正在操作中....";
var inputAt2 = "操作成功正在返回....";//操作成功在返回....";
var inputTimer;
var inputInterval=3000;

document.getElementById('input1').value = "操作成功在返回....";
function input_update() {
inputTimer = setTimeout('input_update()',inputInterval);
if(document.getElementById('input1').value == inputAt2)
document.getElementById('input1').value = inputAt1;
else
document.getElementById('input1').value = inputAt2;
}
input_update();
</script>

探讨:
<script language='javascript'>
function interval_check()
{
var start_time=new Date(); var sleep_msec=xxxxx;
//在core_function中检查是否到时，例如：
now_time=new Date();
if(now_time-start_time>sleep_msec) mission_completed=true
}
</script>
setInterval这个为定时检查的函数
setintervalID=window.setInterval('interval_check();',interval);
通过这两者的结合可以实现
在JS中实现类C#等等的sleep()函数的能力.