JS/jQuery : 여러 함수 호출을 방지하는 함수 재사용

Question

제 생각을 용서해주십시오. 나는 최근에 자바 스크립트를 작성하기 시작했습니다. 바로 사용할 수있는 솔루션을 찾는 것이 아니라 코드를 직접 작성하는 데 도움이 될 몇 가지 통찰력을 얻으 려합니다.

전체 화면 슬라이딩 패널 유형 웹 사이트에서 화살표 키 또는 클릭 가능한 링크를 사용하여 탐색 할 수있는 옵션이 있습니다.

화살표 키를 사용하여 탐색 할 때 모든 기능이 훌륭하게 작동했습니다. 화면 탐색 링크를 사용할 때 같은 기능을 호출하고 싶습니다. 함수와 변수가 키 바인딩 함수 내부에 선언되어 있으므로이 작업을 수행하는 방법을 잘 모르겠습니다.

두 번째 문제점은 함수가 여전히 애니메이션을 적용하는 동안 슬라이드 함수가 두 번 이상 호출되지 않도록하는 방법이 필요하다는 것입니다. 나는 다양한 setTimeout 구현과 Ben Alman의 doTimeout 및 debounce를 시도했지만 제대로 작동하지는 못했다.

도움이 될 것입니다.

$(document).ready(function() {   

var currentSlide = 1; 

$(document).keydown(function(e){ 

    nextSlide = currentSlide + 1; 
    prevSlide = currentSlide - 1; 

    lastSlide = $(".slide").length 

    cur1 = document.getElementById("slide" + currentSlide); 
    prev1 = document.getElementById("slide" + prevSlide); 
    next1 = document.getElementById("slide" + nextSlide); 

    function moveRight(){ 
     if(currentSlide < lastSlide){ 
     $(next1).addClass('frontAndCenter').stop().animate({ 
      left: "0", 
     }, 500, function() { 
      $(this).removeClass("frontAndCenter"); 
      $(cur1).css("left", "-100%"); 
     }); 
     currentSlide = currentSlide + 1; 
     } 
     else{ 
      return false; 
     }; 
    }; 

    function moveLeft(){ 
     if(currentSlide > 1){ 
      $(prev1).addClass('frontAndCenter').stop().animate({ 
      left: "0", 
      }, 500, function() { 
      $(this).removeClass("frontAndCenter"); 
      $(cur1).css("left", "100%"); 
      }); 
      currentSlide = currentSlide - 1 
     } 
     else{ 
      return false; 
     }; 
    }; 

    switch(e.which) { 
     case 37: // left 
      moveLeft(); 
     break; 

     case 39: // right 
      moveRight(); 
     break; 

     default: return; 
    } 
    e.preventDefault(); 
}); 

$("#arrowRight").click(function() { 
    moveRight();   
}); 

$("#arrowLeft").click(function() { 
    moveLeft(); 
}); 

}); 

Answer 1

을 외부에서 함수를 선언 : 당신이 바이올린하지 않으려면 http://jsfiddle.net/BKpAK/3/

그리고 여기 그냥 JS입니다 : 여기

은 내가 만든 것을의 단순 버전으로 jsFiddle입니다 키 바인딩은

처럼

var myFunction = function(e) { 
    bla bla bla; 
} 

그런 다음를 keyDown 함수에서 외부에서 함수를 호출

(document).keydown(function(e){ 
    myFunction(e); 
} 

또는 원하는 곳에서 전화하십시오.

Answer 2

첫 번째 문제는 올바른 것입니다. 이벤트 처리기를 간단하게 유지하려고합니다. 당신은 이벤트 핸들러의 외부에서 논리를 이동해야합니다

$(document).ready(function() { 
    //I would recommend putting the logic in here to avoid creating global variables/functions. 

    var currentSlide = 1; 

    function moveLeft() { /*...reworked logic...*/ } 
    function moveRight() { /*...reworked logic...*/ } 

    $(document).keydown(function(e){ 
     switch(e.which) { 
      case 37: // left 
       moveLeft(); 
      break; 

      case 39: // right 
       moveRight(); 
      break; 

      default: return; 
     } 
     e.preventDefault(); //*You should only really prevent default if you use the key event 
    }); 

    $("#arrowRight").click(function() { 
     moveRight(); 

    }); 

    $("#arrowLeft").click(function() { 
     moveLeft(); 
    }); 
}); 

내 두 번째 문제는 함수가 여전히 애니 메이팅 동안 한번 이상 호출되는 슬라이드 기능 을 방지하는 방법이 필요하다 .

두 번째 문제는 약 jquery queues입니다. 슬라이드를 앞뒤로 움직이는 것을 제어하는 ​​자신 만의 큐를 만들 수 있습니다 (fx 이외의 다른 것의 queueName 제공). 대기열을 추가하는 왼쪽/오른쪽 단계는 현재 대기열에있는 항목이 완료되면 활성화됩니다. 여러 개의 왼쪽/오른쪽 작업을 문자열로 묶지 않으려면 실행중인 다른 모든 효과를 죽이지 않고 해당 대기열을 취소 할 수 있습니다.