来回动画的封装—练习定时器和函数封装的思想

最新推荐文章于 2022-02-25 08:47:46 发布

原创最新推荐文章于 2022-02-25 08:47:46 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章

订阅专栏

Javascript

27 篇文章

订阅专栏

本文探讨了定时器在多线程环境下可能导致的速度失控问题，并通过封装思想改进代码，避免重复声明变量，提升运行效率。同时，展示了如何使用定时器控制元素动画，确保每次点击按钮时仅执行一个定时任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要点：

1.定时器原本只打开一个，在不做任何处理的时候，如果在上一个定时器执行完成之前快速点击按钮。定时器的所执行的函数的速度，会不断的加快，自己臆测的原因是，多线程，同时打开多个定时器，不会等到上一个处理完成之后来处理下一个，而是类似于多线程的原理，共同的处理定时器绑定的处理函数。

2.理解封装思想，这个函数，原来只是处理单一的功能，而封装之后，将需要的不同的对象接口暴露出来，功能模块代码进行封装，用户传递对象就可以对不同的目标对象执行相同的函数操作。

例子中的element.intervalName，原来是通过var进行声明得到的，这样会多申明一块空间的操作，执行的效率会慢一点，而这样在已有的对象的空间中添加一个新的属性，会提高运行速度。一点一滴的积累，到最后会是量的质变。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		input{
			margin-top: 20px;
		}
		div{
			margin-top: 30px;
			width: 225px;
			height: 175px;
			background-color: #6D1F9B;
			position: absolute;
			/*一定要是相对定位，不然写的移动的位置不能改变而显示出来*/
		}
	</style>
</head>
<body>
	<input type="button" value="移动500px" id="btn1">
	<input type="button" value="移动1000px" id="btn2">

	<div id="div"></div>

	<script type="text/javascript">
        function myGet(id){
        	return document.getElementById(id);
        }

        myGet("btn1").onclick = function(){
        	animate(myGet("div"),500);
        }
        myGet("btn2").onclick = function(){
        	animate(myGet("div"),1000);
        }
   	            
        function animate(element,target){
        	clearInterval(element.intervalName);
        	// 每次点击移动按钮的时候,清理定时器,将原来的定时器清理掉,不然会叠加多线程多个定时器,加快速度
        	element.intervalName = setInterval(function(){
	            var current = element.offsetLeft;
	            // 通过.style.left不能获取style标签里面的值，只能获取到内部样式的值
	            // 而.offsetLeft这个值，可以获取到任何位置，div这个属性的.left的值，不带单位
	            var step = 8;
	            // 每次增加10像素
	            step = current<target?step:-step;
	            // 判断是在目标的左边还是右边，从而判断是前进还是后退
	            current += step;
	            if(Math.abs(target-current)>Math.abs(step)){
	            	element.style.left = current + "px";
	            }else{
	            	clearInterval(element.intervalName);
	            	element.style.left = target + "px";
	            	// 当执行到最后一步时，如果不满增加的长度，而再一次执行时，而又超过目标像素的距离，
	                // 所以设置直接一步到目标距离,而不会
	            }  	
            },30)
        }
        
    </script>
</body>
</html>

效果：