标签:
javaScript里面内置了两个定时器,一个是setTimeout()一个是setInterval()。下面将由浅入深来理解一下定时器的工作原理。
使用方式:
setTimeout
的语法非常简单,第一个参数为回调函数,第二个参数为延时的时间。函数返回一个数值类型的ID唯一标示符,此ID可以用作 clearTimeout
的参数来取消定时器: function out(){
alert("定时器");
};
var timeoutID = window.setTimeout(out,10000);
第一个参数可以传入多个回调函数中间以";"隔开即可,另外要注意的是函数不能加(),不能写成out();否则就会有意想不到的错误。var timeoutID = window.setTimeout(out,10000);
var btn = document.getElementById("mybtn");
btn.onclick = function () {
setTimeout(function () {
document.getElementById("message").nodeName = "mymessage";
//其它代码
}, 250);
}
对于定时器最要注意的是:指定的时间间隔表示何时将定时器的代码添加到队列中,而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <input type="button" value="开始计时!" onClick="timedCount()"> <input type="text" id="txt"> <input type="button" value="停止计时!" onClick="stopCount()"> </body> <script type="text/javascript"> var c = 0 var t function timedCount() { document.getElementById(‘txt‘).value = c c = c + 1 t = setTimeout("timedCount()", 1000) } function stopCount() { clearTimeout(t) } </script> </html>
setTimeout(function () {
//处理中
setTimeout(arguments.callee, interval);
}, interval)
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
}
这时,如果企图使用以下语句来使hello函数延迟3秒执行是不可行的: <script language="JavaScript" type="text/javascript">
<!--
var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
}
//创建一个函数,用于返回一个无参数函数
function _hello(_name){
return function(){
hello(_name);
}
}
window.setTimeout(_hello(userName),3000);
//-->
</script>
这里定义了一个函数_hello,用于接收一个参数,并返回一个不带参数的函数,在这个函数内部使用了外部函数的参数,从而对其调用,不需要使用参数。在 window.setTimeout函数中,使用_hello(userName)来返回一个不带参数的函数句柄,从而实现了参数传递的功能。 clearInterval(Method);
可是读了上面的内容我们知道它是不会马上执行的,所以优化方案如下var timeout = false; //启动及关闭按钮
function time()
{
if(timeout) return;
Method();
setTimeout(time,100); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒
}
标签:
原文地址:http://blog.csdn.net/liaodehong/article/details/52212721