Как отключить функцию для повторного запуска при наведении - PullRequest
0 голосов
/ 29 мая 2018

Я пытаюсь сделать упругий шар, который перемещается при зависании пользователем.У меня возникла проблема с тем, как отключить функцию для повторного запуска, если мяч снова пересечет мышь.Это иногда вызывает замораживание / ошибки.Я не совсем уверен, как действовать, чтобы избежать этого.У вас есть какие-нибудь советы?

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 }
    ],
  });


  }

1 Ответ

0 голосов
/ 29 мая 2018
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;

}

...