定时器setInterval
1.setInterval开启定时器
* setInterval()
* - 定时调用
* - 可以将一个函数,每隔一段时间执行一次
* - 参数:
* 1.回调函数,该函数会每隔一段时间被调用一次
* 2.每次调用间隔的时间,单位是毫秒
*
* - 返回值:
* 返回一个Number类型的数据
* 这个数字用来作为定时器的唯一标识
setInterval(function() {
h.innerHTML = count++;
}, 1000);
2.关闭定时器
clearInterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
* clearInterval()可以接收任意参数,
* 如果参数是一个有效的定时器的标识,则停止对应的定时器
* 如果参数不是一个有效的标识,则什么也不做
开启定时
var timer = setInterval(function(){
},30)
关闭定时器
clearInterval(timer);
3.小练习:自动切换图片
//获取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);
};
喜欢这篇文章的大佬,不嫌弃可以关注一下我的公众号哈
今天的文章js 定时器非阻塞怎么解决_Js定时器分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/70609.html