定时调用
window.onload = function(){
//获取count
var count = document.getElementById("count");
//使count中的内容，自动切换
/*
* JS的程序的执行速度是非常非常快的
* 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
*/
/*for(var i=0 ; i<10000 ; i++){
count.innerHTML = i;
alert("hello");
}*/
setInterval()
- 定时调用
- 可以将一个函数，每隔一段时间执行一次
- 参数：
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒
- 返回值：
返回一个Number类型的数据
这个数字用来作为定时器的唯一标识
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
//关闭定时器
clearInterval(timer);
}
},1000);
//console.log(timer);
clearInterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
clearInterval(timer);
};
练习例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
/*
* 使图片可以自动切换
*/
//获取img标签
var img1 = document.getElementById("img1");
//创建一个数组来保存图片的路径
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
//创建一个变量，用来保存当前图片的索引
var index = 0;
//定义一个变量，用来保存定时器的标识
var timer;
//为btn01绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
/*
* 目前，我们每点击一次按钮，就会开启一个定时器，
* 点击多次就会开启多个定时器，这就导致图片的切换速度过快，
* 并且我们只能关闭最后一次开启的定时器
*/
//在开启定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(timer);
/*
* 开启一个定时器，来自动切换图片
*/
timer = setInterval(function(){
//使索引自增
index++;
//判断索引是否超过最大索引
/*if(index >= imgArr.length){
//则将index设置为0
index = 0;
}*/
index %= imgArr.length;
//修改img1的src属性
img1.src = imgArr[index];
},1000);
};
//为btn02绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//点击按钮以后，停止图片的自动切换，关闭定时器
/*
* clearInterval()可以接收任意参数，
* 如果参数是一个有效的定时器的标识，则停止对应的定时器
* 如果参数不是一个有效的标识，则什么也不做
*/
clearInterval(timer);
};
};
</script>
</head>
<body>
<img id="img1" src="img/1.jpg"/>
<br /><br />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>
延时调用
开启一个定时器
setInterval(function(){
console.log(num++);
},3000);
延时调用，
延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
var timer = setTimeout(function(){
console.log(num++);
},3000);
使用clearTimeout()来关闭一个延时调用
clearTimeout(timer);
扫一扫
4526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
