Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
JavaScript-定时器方法 237,希望能够帮助你!!!。
window对象中有两个定时器方法:1)setInterval 2)setTimeout 两个都是单线程的方法
1)setInterval
setInterval(code,time)持续的每隔一段时间执行指定的代码,单位是毫秒(1秒=1000毫秒)
参数1:要执行的代码(可以是代码或者方法) 参数2:间隔的毫秒数
停止定时器的方法是clearInterval(定时器id)因为setInterval也可以设定多个定时,所以clearInterval方法中的id是要指定清除那个定时器的标识即定时器的返回值
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定时器</title>
<script type="text/javascript">
//执行代码的方式
//方式1 直接书写执行的代码
function startTimer() {
setInterval('alert(new Date().toLocaleTimeString());', 1000);
}
//方式2 调用方法
//注意:1 不用忘记小括号 2 建议加分号
function startTimer() {
setInterval('doSth();', 1000);
}
//方式3 直接书写方法名,方法名相当于一个变量
function startTimer() {
setInterval(doSth, 1000);
}
//要执行的方法
function doSth() {
alert(new Date().toLocaleTimeString());
}
//方式4 使用匿名方法 推荐! 推荐! 推荐!
//包括之后的绑定事件,JQuery中基本都是匿名方法
function startTimer() {
setInterval(function () {
alert(new Date().toLocaleTimeString());
}, 1000);
}
</script>
</head>
<body>
<input type="button" onclick="startTimer();" value="开启定时器" />
</body>
例题:文本框中的值自增
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定时器</title>
<script type="text/javascript">
var intervalId;//声明定时器id;
function startTimer() {
//获取文本框的值并转换为数值类型
var num = parseInt(window.t1.value);//此处不转换也可以
//在匿名方法中每隔1秒文本框值加1
intervalId= setInterval(function () {
num++;//每次自增1
window.t1.value = num;//将自增后的值重新赋值给文本框
}, 1000);
}
//停止定时器的运行
function stopTimer() {
clearInterval(intervalId);
}
</script>
</head>
<body>
文本框<input type="text" value="0" id="t1" /><br /><br />
<input type="button" onclick="startTimer();" value="开始自增" />
<input type="button" onclick="stopTimer();" value="停止自增" />
</body>
2)setTimeout
setTimeout(code,time)超过多少时间只执行一次指定的代码,单位也是毫秒
参数1:要执行的代码(可以是代码或者方法) 参数2:超过多少的毫秒数
function showTime() { setTimeout(function () { alert(new Date().toLocaleTimeString()); }, 1000); }
停止定时器的方法: clearTimeout(定时器id)
两个定时器很好区分:interval:间隔;timeout:超时
两个定时器的异同:
相同点: 都是每隔多少时间执行一段代码
不同点:
1) setInterval是持续的执行一段代码;setTimeout是只执行一次
2)停止定时器的方法名 1)setInterval的是clearInterval 2)setTimeout的是clearTimeout
注意:定义停止定时器的id时一定要将变量定义在事件(方法)外面
今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。