mousemove에서 Javascript clear timeout

Question

사용자 커서가 화면의 오른쪽 20px 내에있을 때 열리는 애니메이션 메뉴를 만들었습니다. 사용자 커서가 2 초 내에이 영역 밖으로 나가면 자바 스크립트 타임 아웃으로 어려움을 겪고 있습니다. 내 코드는 지금까지 다음과 같습니다

HTML

자바 스크립트 // 타이머 변수 var에 타이머;

function openToolbar() 
    {    
     // Only execute for desktop 
     $('.no-touch').on('mousemove',function(event) { 

      // Toolbar and Window width 
      var tableToolbar = $('.ac-table-toolbar'), 
       winWidth = $(window).width(); 

      // If cursor enters right hand side of the screen start the timer 
      // and execute after 2 seconds     
      if(event.pageX > (winWidth - 20)) { 

       // Timeout 
       timer = setTimeout(function() 
       { 
        // Add active class to toobar and css transition will animate it 
        // to open position 
        tableToolbar.addClass('active').removeClass('notActive'); 
       }, 2000); 
      } 

      // If mouse pointer leaves right hand side of the screen and 
      // still has notActive class cancel the timeout to prevent 
      // the toolbar from opening 
      if(event.pageX < (winWidth - 20) && tableToolbar.hasClass('notActive')) 
      { 
       clearTimeout(timer); 
      } 

      // Toolbar has active class so we know its visible 
      if(tableToolbar.hasClass('active') && event.pageX < (winWidth - 220)) 
      { 
       // Clear timeout (if needed?) 
       clearTimeout(timer); 

       // Remove active class and css transition will return it to docked position 
       tableToolbar.removeClass('active').addClass('notActive'); 
      }     
     }); 
    } 

애니메이션은 활성화 된 notActive 클래스에 의해 트리거되는 CSS 전환으로 처리됩니다.

누구든지 올바른 방향으로 나를 가리킬 수 있습니다. 미리 감사드립니다.

Answer 1

너무 복잡한 최신 마우스 위치를 추적. 많은 양의 mousemove 이벤트가 발생하면 페이지 속도가 느려집니다. 또 다른 접근 방법을 사용해보십시오 :

는

HTML :

<div id='rightActivateZone'></div> 

CSS :

#rightActivateZone { 
    background-color: red; // change to transparent for your purpose 
    height: 100%; 
    width: 20px; 
    position: fixed; 
    top: 0; 
    right: 0;  
} 

JS : finelords 대답으로

var timer; 
$('#rightActivateZone').on('mouseenter', function() { 
    timer = setTimeout(function() { 
     alert('fire!'); // your code to show menu is here    
    }, 2000); 
}); 
$('#rightActivateZone').on('mouseleave', function() { 
    clearTimeout(timer); 
}); 

JSFiddle demo

Answer 2

는 오히려 시간을 지우기보다, 아마도 그것은 실행하자,하지만이 작업

var currentX;  

function openToolbar() 
{    
    // Only execute for desktop 
    $('.no-touch').on('mousemove',function(event) { 

     currentX = event.pageX; 

     // Toolbar and Window width 
     var tableToolbar = $('.ac-table-toolbar'), 
      winWidth = $(window).width(); 

     // If cursor enters right hand side of the screen start the timer 
     // and execute after 2 seconds     
     if(currentX > (winWidth - 20)) { 

      // Timeout 
      timer = setTimeout(function() 
      { 
       // check the mouse position after the timeout 
       if(currentX > (winWidth - 20)) { 
        // Add active class to toobar and css transition will animate it 
        // to open position 
        tableToolbar.addClass('active').removeClass('notActive'); 
       } 
      }, 2000); 
     } 

     // Toolbar has active class so we know its visible 
     if(tableToolbar.hasClass('active') && currentX < (winWidth - 220)) 
     { 
      // Remove active class and css transition will return it to docked position 
      tableToolbar.removeClass('active').addClass('notActive'); 
     }     
    }); 
} 

Answer 3

나는 동의한다. 아래의 설명을 참조 http://jsfiddle.net/robschmuecker/EZJv6/

우리는 존재 aswell에있는 타이머에 체크를해야했다 : 즉

데모 귀하의 질문에 대답 할 수 있지만 가장 좋은 방법입니다.

JS :

var timer = null; 

function openToolbar() { 
    // Moved these out of event to prevent re-processing. 
    // Toolbar and Window width 
    var tableToolbar = $('.ac-table-toolbar'), 
     winWidth = $(window).width(); 
    // Only execute for desktop 
    $('.no-touch').on('mousemove', function (event) { 
     // If cursor enters right hand side of the screen start the timer 
     // and execute after 2 seconds 

     // here you are setting a timer on every mousemove, even the ones when the cursor is over the active bar so we need to fix by checking if 
     if (event.pageX > (winWidth - 20) && tableToolbar.hasClass('notActive') && timer == null) { 
      // Timeout 
      console.log('setting timeout'); 
      timer = setTimeout(function() { 
       // Add active class to toobar and css transition will animate it to open position 
       tableToolbar.addClass('active').removeClass('notActive'); 
      }, 500); 
     } 
     // If mouse pointer leaves right hand side of the screen and 
     // still has notActive class cancel the timeout to prevent 
     // the toolbar from opening 
     if (event.pageX < (winWidth - 20) && tableToolbar.hasClass('notActive') && timer != null) { 
      clearTimeout(timer); 
      timer = null; 
      console.log('cancelling timeout 1'); 
     } 
     // Toolbar has active class so we know its visible 
     if (tableToolbar.hasClass('active') && event.pageX < (winWidth - 20)) { 
      // Clear timeout (if needed?) 
      clearTimeout(timer); 
      timer = null; 
      console.log('cancelling timeout 2'); 
      // Remove active class and css transition will return it to docked position 
      tableToolbar.removeClass('active').addClass('notActive'); 
     } 
    }); 
} 

openToolbar();