定时器

最新推荐文章于 2024-08-04 20:14:50 发布

半步浮生

最新推荐文章于 2024-08-04 20:14:50 发布

阅读量121

点赞数

文章标签：定时器 js

本文链接：https://blog.youkuaiyun.com/qq_36245314/article/details/103213216

版权

JavaScript定时器实现动画

定时器的概念
- 定时器的设置方式
- - 实际上的运用

定时器的概念

我们每天早上会设置闹钟，而且都是提前设置好，然后到点了就会准时提醒，这就是延时执行的概念。
同时设置好的闹钟又分执行一次和重复执行。
执行一次的设置代码为：
setTimeout（）；
有设置那肯定就得有结束对吧，不然早晨的我们不是要被吵死了对吧。
清除设置好的定时器：
clearTimeout（）；
再提一下，定时器设置的是当前时间到执行时间之间的毫秒数。1000即为1s。

function web(){
console.log("闹钟");
}
var time = setTimeout（web，1000）；
//这里就是这是1秒后执行这个函数，在控制台打印“闹钟”
clearTimeout（time）；
//清除闹钟程序，也可理解成暂停闹钟。

有执行一次的定时器，那就必然也有重复执行多次的方式
设置为：
setInterval（）；
清除：
clearInterval（）；

定时器的设置方式

上述代码为第一种设置定时器的方式，
第二种方式为：

var time = setTimeout（"web()"，1000）；

第三种方式为：

setTimeout（function web(){
console.log("闹钟");
}，1000）

所达到的效果都是一样的，只是方式不一样而已。
清除自然也是和执行一次的方式的清除大同小异。

clearInterval（time）；

实际上的运用

说到底，具体要怎么用呢，除了闹钟还能实现什么效果呢，举个小例子，定时实现随机切换盒子颜色、大小、位置；

<body>
			<button>开始</button>
			<button>停止</button>
			<div></div>
	<script>
		var div =document.getElementsByTagName("div")[0];
		var btn =document.getElementsByTagName("button");
        function Xun(){
			var wid=parseInt(Math.random()*800);
			var hei=parseInt(Math.random()*800);
			var top=parseInt(Math.random()*200);
			var lef=parseInt(Math.random()*200);
			var a =parseInt(Math.random()*255);
			var b =parseInt(Math.random()*255);
			var c =parseInt(Math.random()*255);
			div.style.width=wid+"px";
			div.style.height=hei+"px";
			div.style.marginLeft=lef+"px";
			div.style.marginTop=top+"px";
			div.style.backgroundColor='rgb(' + a + "," + b + "," + c + ')';
		 }
	           var time =null;
	        btn[0].onclick=function(){
	        	clearInterval(time);//每一次执行开始时，都先清除定时器
	           time =setInterval(Xun,1000);
	        }
			btn[1].onclick=function(){
	           	clearInterval(time);
	        } 
	</script>
	</body>

如上代码所示，点击开始按钮，网页里就开始随机出现大小颜色位置都不一样的盒子，点击结束时，就可以停止改变。
但是还有一个bug，那就是多次点击开始按钮时会有bug，就是越来越快，并且无法停止，这个问题就只需要一行代码就可以解决。就是再每一次执行开始时，都先清除定时器，这样每一次点击都是重新开始。
如此，就达我们所需要的效果了。