mousemovement가 중지 된 후에도 Mousemove 이벤트가 무한 루프를 일으키고 있습니다.

Question

여기에 문제의 페이지가 있습니다 : http://yac-web.com/clients/dessert/ 마우스가 이동하는 동안 발생하는 효과를 설정하려고 시도하고 있습니다. 웬일인지 이벤트는 시작되지만 루프를 계속 유지합니다. JS에 익숙하지 않고 mousemove 이벤트에 대한 많은 정보를 찾을 수 없습니다. 감사합니다

$('html').mousemove(function() { 
    $('html').toggleClass("change", 1000, "easeOutSine"); 
}) 

다음

html { 
    background: rgba(191, 54, 245, 1); 
} 
.change { 
    background: rgba(61, 98, 245, 1); 
} 

데모 : Fiddle

Answer 1

기본적인 문제는 마우스가 마우스 후 너무도 큐잉 시스템을 사용 토글 클래스를 많이 대기중인 이동 될 때입니다 애니메이션이 계속 실행됩니다.

진행중인 애니메이션이있는 경우 더 토글을 추가하지 않는 솔루션은 시도

var flag = false; 
$('html').mousemove(function() { 
    if (flag) { 
     return; 
    } 
    flag = true; 
    $('html').toggleClass("change1", 1000, "easeOutSine", function() { 
     flag = false; 
    }); 
}) 

데모 : Fiddle

또 다른이 :animated 선택을 사용하는 것입니다

var $html = $('html').mousemove(function() { 
    if ($html.is(':animated')) { 
     return; 
    } 
    $('html').toggleClass("change1", 1000, "easeOutSine"); 
}) 

데모 : Fiddle

Answer 2

Arun P Johny의 답변은 실제로 문제를 실제로 해결하는 측면에서 가장 좋은 방법 일 수 있지만 문제가 발생한 이유에 대해서는 자세히 설명하지 않습니다.

문제가 일어나는 이유는 다음과 같습니다

때마다 마우스의 위치 업데이트, 그것은 추가 (여러 번 두 번째, 당신은 심각한 지연이 발생하는하지 않는 한 나는 업데이트 사이의 제 1/16이 가정합니다) 애니메이션 목록 끝에 새 애니메이션이 있어야합니다. 그런 다음 마우스 이동을 멈 추면 여전히 대기열에 남아있는 애니메이션 수가 1 초마다 걸립니다. 마우스를 움직일 때마다 1/16 초마다 애니메이션 시간에 초를 추가합니다. 따라서 1 초 동안 움직이면 시작한 후 16 초가 지나면 애니메이션이 멈 춥니 다.

이것은 이전 애니메이션이 끝날 때까지 새 애니메이션이 추가되지 않도록하여 해결됩니다.