关于setTimeout()阻塞的问题

最新推荐文章于 2025-06-18 10:11:40 发布

InfOrange

最新推荐文章于 2025-06-18 10:11:40 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：问题

本文链接：https://blog.youkuaiyun.com/InfOrange/article/details/53557198

问题专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单函数，该函数可以使HTML页面中的元素平滑地从当前位置移动到另一个指定的位置。通过逐步调整元素的位置属性，实现了动画效果。然而，当存在多个定时器时，函数可能会出现问题。

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

function go_to_position(x, y) {
	var ele = document.getElementsByTagName("p")[0];
	var x_now = parseInt(ele.style.left);
	
	//console.log(x);
	var y_now = parseInt(ele.style.top);

	if(x_now != x || y_now != y) {
		if(x_now - x > 0) {
			x_now -= 1;
		}
		if(x_now - x < 0) {
			x_now += 1;
		}
		if(y_now - y > 0) {
			y_now -= 1;
		}
		if(y_now - y < 0) {
			y_now += 1;
		}
		ele.style.left = x_now + 'px';
		ele.style.top = y_now + 'px';
		console.log(x_now+","+y_now);
		}

		if(x_now == x && y_now == y) {
			clearTimeout(movement);
			return false;
		}
		movement = setTimeout(function() {
			go_to_position(x, y);
		}, 50);

	}

go_to_position(400, 200);//当出现两个setTimeout的时候，调用函数导致X,Y赋值混乱，位于目标点两侧时，加减操作死循环go_to_position(100, 200);