js的定时回调函数_js定时器回调函数-优快云博客

本文链接：https://blog.youkuaiyun.com/LZhizi/article/details/89949283

博客围绕JS定时回调函数展开，虽具体内容缺失，但可知聚焦于JavaScript中定时回调这一信息技术相关内容，定时回调函数在前端开发中可用于实现定时任务等功能。

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


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		position: absolute;
		top: 40px;
		left: 20px;
		background-color: pink;
	}
</style>
<script type="text/javascript">
	window.onload=function(){
		var btn=document.getElementById('btn');
		var div=document.getElementById('div');
		var num=0;
		btn.onclick=function(){ 
			doMove(div,'left',30,800,function(){
				doMove(div,'top',30,600,function(){
					doMove(div,'left',30,30,function(){
						doMove(div,'top',30,40);
					});
				});
			});
		}

		function doMove(obj,attr,dir,target,endFn){
			dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
			clearInterval(obj.timer);
			obj.timer=setInterval(function(){
				 num=parseInt(getStyle(obj,attr))+dir;
				if(num>target&&dir>0||num<target&&dir<0){
					num=target;
				}
				obj.style[attr]=num+'px';
				if(num==target){
					clearInterval(obj.timer);
				endFn&&endFn();
			}
				
			},30);
		}

		function getStyle(obj,attr){
			return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
		}
	}
</script>

<body>
	<input id="btn" type="button" name="" value="走">
	<div id="div"></div>
</body>
</html>

在这里插入图片描述