`

JS定时器

    博客分类：
  • JS
浏览器JavaScriptprototypeHTML 
阅读更多
在javascritp中，有两个关于定时器的专用函数，它们是：
1.倒计定时器：timename=setTimeout("function();",delaytime);

2.循环定时器：timename=setInterval("function();",delaytime);
　　function()是定时器触发时要执行的是事件的函数，可以是一个函数，也可以是几个函数，或者javascript的语句也可以，单要用;隔开；delaytime则是间隔的时间，以毫秒为单位。
　　倒计时定时器就是在指定时间后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，其区别在于：前者只是作用一次，而后者则不停地作用。
　　倒计时定时器一般用于页面上只需要触发一次的的情况，比如点击某按钮后页面在一定时间后跳转到相应的站点，也可以用于判断一个浏览者是不是你的站点上的“老客”，如果不是，你就可以在5秒或者10秒后跳转到相应的站点，然后告诉他以后再来可以在某个地方按某一个按钮就可以快速进入。
　　循环定时器一般用于站点上需要从复执行的效果，比如一个javascript的滚动条或者状态栏，也可以用于将页面的背景用飞雪的图片来表示。这些事件需要隔一段时间运行一次。
　　有时候我们也想去掉一些加上的定时器，此时可以用clearTimeout(timename) 来关闭倒计时定时器，而用clearInterval(timename)来关闭循环定时器。



======================
DEMO1
====================== 
<html>

<head>

<script language="JavaScript">
<!--

function Refresh()
{
 var newDateObj = new Date();
 document.form1.txt_Time.value=newDateObj.toLocaleString();//使用当前区域设置并已被转换为字符串
}

var MyInterval=setInterval("Refresh()",1000);

function Stop()
{
 if(event.srcElement.value=="STOP")
 //if(document.form1.btn_Stop.value=="STOP")
 {
  clearInterval(MyInterval);
  document.form1.btn_Stop.value="START";
 }
 else if(event.srcElement.value=="START")
 //else if(document.form1.btn_Stop.value=="START")
 {
  MyInterval=setInterval("Refresh()",1000);
  document.form1.btn_Stop.value="STOP";
 }
}

function Clear()
{
 if(event.keyCode==8)//退格键
 {
  event.srcElement.value="";
 }
}
//-->
</script>
</head>


<body>

<form name="form1">
当前时间：<input type=text name="txt_Time" size=30 onkeydown="Clear()">
<input type="button" name="btn_Stop" value="STOP" onClick="Stop()">


</form>

</body>

</html>



======================
DEMO2
====================== 
<html>

<head>

<SCRIPT>

function Refresh()
{
 Time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());
 setTimeout("Refresh()",1000);
}

var timer=setTimeout("Refresh()",1000);

function Stop()
{
 if(event.srcElement.value=="STOP")
 {
  clearTimeout(timer);
  document.all.btn_Stop.value="START";
 }
 else if(event.srcElement.value=="START")
 {
  timer=setTimeout("Refresh()",1000);
  document.all.btn_Stop.value="STOP";
 }
}

</SCRIPT>
</head>

<body>
<DIV style="background-color:#eeeeee" id="Time"></DIV>
<input type="button" name="btn_Stop" value="STOP" onClick="Stop()">

<button name='btnTest' onclick="javascript:alert(this.name)">测试</button>
</body>

</html>



===============================
解决setTimeout不能传递参数的问题
===============================
一、采用字符串形式：——（缺陷）参数不能被周期性改变 

setInterval("foo(id)",1000);



二、匿名函数包装 

window.setInterval(function()

    {

foo (id);

    }, 1000);

   这样就可以周期性执行foo（id）这个函数，而且把变量id传递进去；


三、定义返回无参函数的函数 

function foo(id)

{

   alert(id);

}

function _foo(id)

{

return function()

{

foo(id);

}

}

window.setInterval(_foo(id),1000);

这里定义了一个函数_foo，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在 window. setInterval函数中，使用_foo(id)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。


四、修改setInterval 

function foo(id)

{

alert(id);

}

var _sto = setInterval;   

window.setInterval = function(callback,timeout,param)

{   

var args = Array.prototype.slice.call(arguments,2);   

var _cb = function()

{   

callback.apply(null,args);   

}    

_sto(_cb,timeout);   

}

window.setInterval(hello,3000,userName);

以上的所有方法也适合setTimeout。


五、各自的关闭方法： 

clearTimeout(id);

clearInterval(id);



分享到：
| WebService大讲堂之Axis2 pdf下载
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics