如何让offset()控制的元素实现循环移动？代码问题求助

我花了好长时间写了这段代码，运行是正常的，但就是没法让元素循环移动——也就是移到终点后再回到起点重复整个移动过程。麻烦各位帮忙分析下问题，再给个解决方案~

<h1 id="heading">Hello</h1>
<script>
var offsetLeft = 0;
var offsetTop = 0;
var offsetLeftReverse = 200;
var offsetTopReverse = 200;
var moveHeading = function () {
  $("#heading").offset({ left: offsetLeft, top: offsetTop});
  if(offsetLeft < 200){
    offsetLeft++;
  } else if (offsetTop < 200){
    offsetTop++;
  }
};
var moveHeadingReverse = function () {
  $("#heading").offset({ left: offsetLeftReverse, top: offsetTopReverse});
  if(offsetLeftReverse > 0 ){
    offsetLeftReverse--;
  } else if (offsetTopReverse > 0){
    offsetTopReverse--;
  }
};
var engine = function () {
  if ( (offsetTop === 0 && offsetLeft <= 200) || (offsetTop < 200 && offsetLeft === 200) ){
    moveHeading();
  } else if ( (offsetTopReverse === 200 && offsetLeftReverse <= 200) || (offsetTopReverse <= 200 && offsetLeftReverse === 0) && ( offsetTopReverse != 0 || offsetLeftReverse != 0 ) ){
    moveHeadingReverse();
    console.log("reverse");
    console.log(offsetTopReverse,offsetLeftReverse);
  }
}
var start = setInterval(engine, 5);
</script>

问题分析 #

你的代码核心问题在于循环触发逻辑缺失，以及状态管理混乱：

1. 你维护了两组独立的偏移变量（offsetLeft/offsetTop 和 offsetLeftReverse/offsetTopReverse），当反向移动到起点(0,0)后，没有任何逻辑触发切换回正向移动，导致元素停在起点不动，无法循环。
2. engine 函数的条件判断存在逻辑错误，比如反向移动的条件里括号位置不对，&& 的优先级高于 ||，导致当元素回到(0,0)时，无法触发任何移动逻辑。
3. 两组变量的存在也让状态同步变得复杂，很容易出现状态不一致的情况。

解决方案 #

我们可以简化状态管理，只用一组偏移变量 + 一个方向标记来实现循环：

• 用 isForward 变量标记当前是正向还是反向移动
• 当正向移动到达终点(200,200)时，切换为反向；当反向移动回到起点(0,0)时，切换为正向
• 统一移动逻辑，不用分开写两个移动函数，让代码更简洁易维护

修改后的代码如下：

<h1 id="heading">Hello</h1>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var offsetLeft = 0;
var offsetTop = 0;
var isForward = true; // 标记当前移动方向

var moveHeading = function () {
  $("#heading").offset({ left: offsetLeft, top: offsetTop });
  
  if (isForward) {
    // 正向移动：先右移到x=200，再下移到y=200
    if (offsetLeft < 200) {
      offsetLeft++;
    } else if (offsetTop < 200) {
      offsetTop++;
    } else {
      // 到达正向终点，切换方向
      isForward = false;
    }
  } else {
    // 反向移动：先上移到y=0，再左移到x=0（和正向路径对称）
    if (offsetTop > 0) {
      offsetTop--;
    } else if (offsetLeft > 0) {
      offsetLeft--;
    } else {
      // 回到起点，切换方向
      isForward = true;
    }
  }
};

var start = setInterval(moveHeading, 5);
</script>

改动说明 #

1. 移除了冗余的反向偏移变量，只用offsetLeft和offsetTop跟踪元素位置
2. 新增isForward变量管理移动方向，逻辑更清晰
3. 在移动函数内部判断是否到达终点/起点，自动切换方向，实现无缝循环
4. 反向移动的路径和正向对称（先上移再左移），保证循环的流畅性

这样修改后，元素就会从(0,0)→(200,0)→(200,200)→(0,200)→(0,0)不断循环移动啦~

内容的提问来源于stack exchange，提问作者user8289610