Предотвращение выполнения функции jQuery до завершения текущего

Question

У меня есть функция в jQuery, которая запускается всякий раз, когда я нажимаю любую из клавиш со стрелками. Ниже приведен код для «стрелки вверх», а остальные три случая выглядят очень похожими и содержатся в функции checkKey.

document.onkeydown = checkKey; 

    function checkKey(e) { 
     var divs = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen"]; 
     e = e || window.event; 

     if (e.keyCode == '38') { 
      for (i = 0; i < divs.length; i++){ 
       var tmp = document.getElementById(divs[i]); 
       var coord = $(tmp).position(); 
       if ((Math.abs(embargo_top - coord.top) < 115) && (Math.abs(embargo_left - coord.left) < 15)){ 
        if(embargo_top < coord.top){ 
         embargo_top = coord.top; 
         embargo_left = coord.left; 
         $(tmp).animate({ 
          'top': (parseInt($(tmp).css('top'), 10) - 100) + "px" 
         }, 500); 
         break; 
        } 
       } 
      } 
      checkIfWinner(); 
     } 

Как обрабатывать эти события, так что если кнопка I разомните кучу клавиш со стрелками, каждое выполнение функции происходит только после того, как вызов предыдущей функции полностью закончена?

Answer 1

Много способов сделать это. Один из способов мог бы добавить их в очередь, где эта очередь может делать только вещь за раз. В каждой функции, когда ее делается, деактивирует ее, чтобы следующая функция могла работать. Вы можете использовать функцию очереди jquery: http://api.jquery.com/jquery.queue/

Answer 2

Кажется, вы анимируете несколько объектов, и вы хотите избежать ввода ключа прежде, чем все анимации прекратятся. Попробуйте следующие изменения (выделены стрелками ==>):

document.onkeydown = checkKey; 

==> var animationStillGoing = 0; 

    function checkKey(e) { 
     var divs = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen"]; 
     e = e || window.event; 

==>   if (animationStillGoing>0) {return} 

     if (e.keyCode == '38') { 
      for (i = 0; i < divs.length; i++){ 
       var tmp = document.getElementById(divs[i]); 
       var coord = $(tmp).position(); 
       if ((Math.abs(embargo_top - coord.top) < 115) && (Math.abs(embargo_left - coord.left) < 15)){ 
        if(embargo_top < coord.top){ 
         embargo_top = coord.top; 
         embargo_left = coord.left; 

         animationStillGoing++; 

         $(tmp).animate({ 
          'top': (parseInt($(tmp).css('top'), 10) - 100) + "px" 
==>       }, 500,function(){animationStillGoing--;}); 
         break; 
        } 
       } 
      } 
      checkIfWinner(); 
     } 

То, что эти изменения делают это, чтобы иметь глобальную переменную следить за текущей анимации. Это значение начинается с 0, и функция keyCheck вернется, если это значение> 0.
AnimationStillGoing будет увеличиваться до того, как анимация начнется и уменьшится, когда анимация закончится. Итак, если еще три анимации продолжаются, этот параметр будет равен 3, если новый будет задействован, он перейдет к 4, и он вернется к значению 0, когда все анимации будут завершены. Когда-то в 0, keyCheck продолжит работу.