js 定时器setInterval

Javascript 专栏收录该内容
62 篇文章 1 订阅

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);
			};

  • 3
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值