点击事件不断更新div的位置

Question

我试图在屏幕上连续获取div的位置，并在每次单击“ click”事件侦听器时更新新位置。目前，我的代码可以运行，但是感觉很多余，可以简化为一个函数。

关于如何解决此问题的任何建议？

谢谢。

这是JavaScript：

// Init .innerHTML for circle
let startText = document.querySelector('.circle').innerHTML = "click";
let circle = document.querySelector('.circle');

var x = 0;
let titleContainer = document.querySelector('.circle');
let progressContainer = document.querySelector('.progress-container');
let avatar = document.querySelector('.avatar');
let avatarSize = document.querySelector('.avatar').clientWidth;
let totalLevels = 5;

// Listen for events
circle.addEventListener('click', mainClickMaze);

// Start position of smaller circle on progressContainer
function moveAvatarForward() {
  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  console.log(sum);

  requestAnimationFrame(frame);

  let pos = 0;

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}

// Move the avatar based on its previous location
function locationOfAvatar() {
  let pos = avatar.style.marginLeft;
  // Remove "px" from pos
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  let movePos = pos + sum;
  console.log(movePos);
  requestAnimationFrame(frame);

  function frame() {
    if (pos != movePos) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}


// Avatar gets moved to the end of the continer
function endOfAvatar() {
  let pos = avatar.style.marginLeft;
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

  // Get size of small circle in progressContainer so that avatarSize does not exceed the bounds of progressContainer
  let avatarSize = document.querySelector('.avatar').clientWidth;

  let progressContainerWidth = progressContainer.clientWidth;

  let sum = progressContainerWidth - avatarSize;
  console.log(sum);

  requestAnimationFrame(frame);

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}



let click = 0;

function mainClickMaze(event) {
  titleContainer.innerHTML = ++click;
  console.log('click:', click)
  if (click == 1) {
    progressContainer.style.display = 'flex';
  } else if (click == 2) {
    moveAvatarForward();
  } else if (click == 3) {
    locationOfAvatar();
  } else if (click == 4) {
    locationOfAvatar();
  } else if (click == totalLevels) {
    // Remove event listener 
    circle.removeEventListener('click', mainClickMaze);
    titleContainer.innerHTML = 'Disabled';
    endOfAvatar();
  }
}

这是html：

<div class="container">
    <div class="circle"></div>
    <div class="move-container">
      <div class="move-back user-click">Back</div>
      <div class="move-forward user-click">Forward</div>
    </div>
    <div class="progress-container">
      <div class="avatar"></div>
    </div>
</div>

最后，这里是一个jsfiddle，以便于参考： Update position of avatar