JS/jQuery: повторное использование функции, предотвращающей многочисленные вызовы функций

Question

Прошу прощения за мое невежество, я только недавно начал писать javascript. Я не ищу готового решения, но больше информации, которая поможет мне написать код сам.

Я работаю над полноэкранным веб-сайтом с раздвижной панелью, с возможностью навигации с помощью клавиш со стрелками или интерактивных ссылок.

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

Моя вторая проблема заключается в том, что мне нужен способ предотвратить более слабые функции слайдов, пока функция все еще оживляет. Я пробовал различные реализации setTimeout, а также doTimeout и debounce Ben Alman, но не может показаться, что он работает правильно.

Любая помощь была бы принята с благодарностью!

Вот в jsFiddle с симплекс версию того, что я построил: http://jsfiddle.net/BKpAK/3/

А вот это просто JS, если вы не хотите, чтобы играть на скрипке:

$(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

Объявите свои функции вне сочетания клавиш, как

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. Вы можете создать свою собственную очередь, которая управляет перемещением слайдов туда и обратно (укажите queueName всего, кроме fx). Любые шаги влево/вправо, которые вы добавляете в очередь, активируются, как только закончится текущая очередь. Если вы не хотите набирать несколько действий влево/вправо, вы можете отменить эту очередь, не убивая все другие эффекты, которые могут быть запущены.