如何禁用功能以在悬停时重新启动

Question

我正在尝试制作一个弹力球，它在用户的悬停时移动。我遇到了一个问题，如果球再次穿过鼠标，如何禁用重新启动的功能。它有时会导致一些冻结/错误。我不是很确定该如何避免这种情况。你们有什么建议吗？

https://codepen.io/kombolo/pen/YvzPvm

谢谢！

window.onmousemove = logMouseMove;

function logMouseMove(e) {
  e = e || window.event;    
  mousePos = e.clientX;
  el = document.querySelector('.circle');
  const elPos = getOffset(el);
  if(mousePos < (elPos -20) || mousePos > (elPos + 20)) {
     triggerAnimation(); 
  };  
}

function getOffset(el) {
  el = el.getBoundingClientRect();
  return el.left + window.scrollX + 50;
}

function triggerAnimation() {
  xValues = [100, 0, 400];
  yValues = [0, 50, 200];
  const xVal = xValues[Math.floor(Math.random()*xValues.length)];
  const yVal = yValues[Math.floor(Math.random()*yValues.length)];
  var duration = anime({
    targets: '#duration .el',
    translateX: [
      { value: xVal, duration: 1000, delay: 500, elasticity: 0 },
      { value: xVal, duration: 1000, delay: 500, elasticity: 0 }
    ],
    scaleX: [
      { value: 2, duration: 100, delay: 500, easing: 'easeOutExpo' },
      { value: 1, duration: 900, elasticity: 300 },
      { value: 2, duration: 100, delay: 500, easing: 'easeOutExpo' },
      { value: 1, duration: 900, elasticity: 300 }
    ],
    translateY: [
      { value: yVal, duration: 1000, delay: 500, elasticity: 0 },
      { value: yVal, duration: 1000, delay: 500, elasticity: 0 }
    ],
  });


  }

Answer 1

Mouse hover is an extensive event. You are doing too much on hover.
what I would suggest is - set window.onmousemove = undefined in 
triggerAnimation function and then turn it on in the last. This helped a little.

function triggerAnimation() {
    window.onmousemove = void 0;

    xValues = [100, 0, 400];
    .....
    ....



    //loop: true
    });

    window.onmousemove = logMouseMove;

}