原生js setInterval定时器执行时间段内动画相互影响问题的解决：给每个element增加一个属性timerId，保证定时器标志互不干扰

本文链接：https://blog.csdn.net/u010234868/article/details/119781984

这篇博客展示了如何使用HTML和CSS实现点击按钮后，两个div元素向右平滑移动的动画效果。通过JavaScript监听按钮点击事件，并封装了动画函数，实现了不同速度的移动动画。文章重点在于理解CSS定位、JavaScript事件处理和动画原理。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box {
			width: 100px;
			height: 100px;
			background-color: pink;
			position: relative; /*右移位置改变脱离文档流*/
		}
		#box1 {
			width: 100px;
			height: 100px;
			background-color: blue;
			position: relative; /*右移位置改变脱离文档流*/
		}
	</style>
</head>
<body>
	<input type="button" value="动画400" id="btn1">
	<input type="button" value="动画800" id="btn2">
	<div id="box"></div>
	<div id="box1"></div>
	<script>
		var btn1 = document.getElementById('btn1');
		var btn2 = document.getElementById('btn2');
		var box = document.getElementById('box');
		var box1 = document.getElementById('box1');
		
		// 1. 点击按钮让盒子向右移动
		btn1.onclick = function () {
			animation(box, 400);
			animation(box1, 400);
		}

		btn2.onclick = function () {
			animation(box, 800);
			animation(box1, 800);
		}

		// 动画封装
		// var timerId = null; // 需全局变量
		function animation(element, target) {
			// 给每个element增加一个属性timerId，保证定时器标志互不干扰
			if (element.timerId) {
				clearInterval(element.timerId);
				timerId = null;
			}
			element.timerId = setInterval(function () {
				// 步距
				var step = 6;
				var current = element.offsetLeft;
				current += step;
				element.style.left = current + 'px';
				// 判断目标偏移位置到达200的位置时停止移动
				if (current >= target) {
					// 停止定时器
					clearInterval(element.timerId);
					element.style.left = target + 'px';  // 赋值为目标值
					// 退出函数
					return;
				};
			}, 30);
		}
		
	</script>
</body>
</html>