setInterval()的使用
setInterval()
作用
这个函数可以将一个函数每隔一段时间执行一次
参数
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒
返回值
返回一个Number类型的数据,这个数字用来作为定时器的唯一标识
使用
写法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取count
var count = document.getElementById("count");
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
//关闭定时器
clearInterval(timer);
}
},1000);
//clearInterval()可以用来关闭一个定时器
//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
//clearInterval(timer);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
写法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var c = document.getElementById("count");
var num = 1;
var fun = function() {
c.innerHTML = num++;
if (num == 11) {
//关闭定时器
clearInterval(timer);
}
}
var timer = setInterval(fun, 1000);//这种方式fun一定不能写成fun()
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
写法三：
每隔一段时间调用一次某对象中的某方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var count = null;//由于count声明为window全局变量，所以下面两种调用方式都可以
//如果不声明为全局变量，则只能使用 setInterval(count.fun, 1000); 的调用方式
window.onload = function() {
c = document.getElementById("count");
var num = 1;
var timer = null;
function Count() {
this.fun = function() {
c.innerHTML = num++;
if (num == 11) {
//关闭定时器
clearInterval(timer);
}
}
}
count = new Count();//为count赋值
timer = setInterval('count.fun()', 1000);//调用Count对象的fun()方法，这里的fun后面必须跟（）
//timer = setInterval(count.fun, 1000);//调用Count对象的fun()方法，这里的fun后面不能加 ()
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
写法四：
调用某全局方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var count = null;
var num = 1;
var timer = null;
var c=null;//这里必须把c声明为全局属性，
var fun = function() {
c.innerHTML = num++;
if (num == 11) {
//关闭定时器
clearInterval(timer);
}
}
window.onload = function() {
c = document.getElementById("count");
timer = setInterval('fun()', 1000);
//timer = setInterval(fun, 1000);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
写法五
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var c = document.getElementById("count");
var num = 1;
var fun = function() {
c.innerHTML = num++;
if (num == 11) {
//关闭定时器
clearInterval(timer);
}
}
var timer = setInterval(function(){
fun();
}, 1000);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
总结
1.setInterval()该方法能每隔一段时间调用某个方法
2.如果传入setInterval()方法中的是函数对象是局部函数，调用方式为：setInterval(fun,time); fun后面不能接括号
3.如果传入setInterval()方法中的是函数对象是全局函数，调用方式有两种：
一：setInterval(fun,time); fun后面不能接括号
二：setInterval('fun()',time); fun后面必须带括号
分类:
javascript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本