jQuery의 "mousemove"에서 변수 선언 - 이벤트

Question

mousemove - jQuery의 이벤트는 마우스가 움직일 때마다 실행되며 이로 인해 초당 수백 건의 이벤트가 실행될 수 있습니다. 이 코드 스 니펫이 있다고 가정 해 보겠습니다.

$(document).on('mousemove', function(e){ 

    /** 
    * This piece of code checks if the mouse is within a 50px range 
    * on either side of the middle of the page. 
    * If is, it shows a set of elements (contained in the action_dots variable). 
    */ 

    var treshold = 50; 
    var action_dots = $('.branch[open][focus]').children('.branch-line').children('.action-dot'); 
    var opacity = action_dots.css('opacity'); 

    if(e.pageX >= ($(window).width()/2 - treshold) && e.pageX <= ($(window).width()/2 + treshold)){ 
     if(opacity == 0){ 
      action_dots.transition({ opacity: 1 }, 100); 
     } 
    } 
    else{ 
     if(opacity == 1){ 
      action_dots.transition({ opacity: 0 }, 100); 
     } 
    } 
}); 

이벤트가 실행될 때마다 이러한 변수를 선언하는 것이 효율적입니까? 선택기와 일치하는 모든 요소를 ​​찾아야하므로 성능에 부담이된다고 생각할 수 있습니다. 아니면 jQuery가 var action_dots의 내용을 캐시 할 수 있습니까? 동일한 퀘스트가 var opacity과 함께 동작 점 'opacity css- 속성을 확인하는 데 적용됩니다.

Answer 1

효율성 측면에서 볼 때, 마우스가 움직이는 모든 단일 픽셀에 대해이 코드를 실행하는 것은 그리 효율적이지 않습니다. 당신이 할 수있는 일은 마우스가 x 밀리 초 동안 움직이지 않을 때 그 코드를 실행하는 것입니다. 이런 식으로 뭔가 : 내 의견으로 당

var mouseTimer; 
$(document).on('mousemove', function(e) { 
    clearTimeout(mouseTimer); 
    mouseTimer = setTimeout(function() {  
     var treshold = 50; 
     var action_dots = $('.branch[open][focus]').children('.branch-line').children('.action-dot'); 
     var opacity = action_dots.css('opacity'); 

     if (e.pageX >= ($(window).width()/2 - treshold) && e.pageX <= ($(window).width()/2 + treshold)) { 
      if (opacity == 0) { 
       action_dots.transition({ opacity: 1 }, 100); 
      } 
     } 
     else { 
      if (opacity == 1) { 
       action_dots.transition({ opacity: 0 }, 100); 
      } 
     } 
    }, 50); // runs 50ms after mouse movement stops. 
}); 

Answer 2

: 점 동적으로 추가되지 않은 경우 페이지의 준비 시간에 한 번 채워집니다 있도록 단순히 $(document).on 전화 외부 action_dots을 선언합니다.

$(function(){ // JQuery ready - modern version 

    var action_dots = $('.branch[open][focus]').children('.branch-line').children('.action-dot'); 

    $(document).on('mousemove', function(e){ 

     /** 
     * This piece of code checks if the mouse is within a 50px range 
     * on either side of the middle of the page. 
     * If is, it shows a set of elements (contained in the action_dots variable). 
     */ 

     var treshold = 50; 
     var opacity = action_dots.css('opacity'); 

     if(e.pageX >= ($(window).width()/2 - treshold) && e.pageX <= ($(window).width()/2 + treshold)){ 
      if(opacity == 0){ 
       action_dots.transition({ opacity: 1 }, 100); 
      } 
     } 
     else{ 
      if(opacity == 1){ 
       action_dots.transition({ opacity: 0 }, 100); 
      } 
     } 
    }); 
}); 

JQuery와 선택기 코드의 가장 느린 부분이지만, 아마 한 번만 실행해야한다는 (또는 적어도 한 번 새로운 항목이 페이지에 추가 될 때마다 - 그것은 동적 인 경우).

특정 예제가 필요한 경우 전체 JS를 게시하십시오 (JQuery "준비 래퍼"가 누락되어 있음 - 표시되지 않음).