有时候,我们会让我们的某断代码延迟执行,这就需要用到定时器,下面就简单介绍以下js中的两种定时器的用法:
1. 一次性定时器
- 设置一次性定时器
var timerId1 = window.setTimeout("方法名、函数名、直接函数或写一段代码", "延时");
- 记得如果你写的是函数名,记得定义这个函数
function 函数名(参数){
// 执行的操作
}
-
清理一次性定时器:
清理定时器,通过之前生成的 定时器id,进行清理,不然它会找不到要清理哪个定时器。
window.clearTimeout(timerId1);
2. 循环定时器
- 设置循环定时器
var timerId2 = window.setInterval("方法名、函数名、直接函数或写一段代码", "延时");
- 同理,如果你写的是函数名,记得定义这个函数
function 函数名(参数){
// 执行的操作
}
-
清理循环定时器:
清理定时器,通过之前生成的 定时器id,进行清理,不然它会找不到要清理哪个定时器。
window.clearInterval(timerId2);
3. 需要注意的地方:
-
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。
- window一般省略不写。
-
延时 的时间是以 毫秒 为单位,单位省略不写。
- 1000(单位毫秒省略不写) = 1s
setTimeout() 只执行 code 一次。如果要 多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(),也就是回调
举个栗子:
- A.当要执行的方法中不需要参数时
<script type=”text/javascript”>
//循环执行,每隔3秒钟执行一次showalert()
window.setInterval(showalert, 3000);
function showalert() {
alert(“我是个弹出框!”);
}
//定时执行,5秒后执行show()
window.setTimeout(show,5000);
function show(){
alert(“大笨蛋!”);
}
</script>
- B.当要执行的方法中需要参数时
<script type=”text/javascript”>
//循环执行,每隔3秒钟执行一次 showalert()
window.setInterval(showalert(“哈哈哈哈。。。”);, 3000);
function showalert(msg){
alert(msg);
}
//定时执 行,5秒后执行showalert()
window.setTimeout(function(){
showalert(“我是定时器!”);
},5000);
</script>
- 当然,这两个都没有清理定时器,这样一直下去会把浏览器整崩溃的
所以,要结合你的具体业务,当满足条件的时候,去清理定时器,不要让它一直不停的循环执行!