Question

我有一个像这样的javascript函数：

$(document).keydown(function(e) {
    switch(e.which) {
        case 38:
            moveUp();
            break;
        case 40:
            moveDown();
            break;
    }
});
function moveDown() {
    $('element').animate({top: "100%"}, {duration: 1000 });
}
function moveUp() {
    $('element').animate({top: "-100%"}, {duration: 1000 });
}

我的问题是如何在keydown函数中创建一个延迟，告诉它必须等到函数moveUp()/movedown()完成再调用函数而不创建队列？

谢谢你的所有建议，顺便说一下，我不能使用setTimeout因为它会导致每个初始函数的延迟。

Answer 1

这应该对你有所帮助，我使用animate的完整功能在它完成动画后立即执行下一个动作。

var isAnimating = false;
var callAfterFinish = undifined;
$(document).keydown(function(e) {
    switch(e.which) {
        case 38:
            moveUp();
            break;
        case 40:
            moveDown();
            break;
    }
});
function moveDown() {
    if(!isAnimating){
        $('element').animate({top: "100%"}, {duration: 1000 },function(){
            if(!callAfterFinish) {
                callAfterFinish();
                callAfterFinish = undifined;
            }
            isAnimating = false;
        });
        isAnimating = true;
    } else if(!callAfterFinish) {
        callAfterFinish = moveDown;
    }
}
function moveUp() {
    if(!isAnimating){
        $('element').animate({top: "-100%"}, {duration: 1000 },function(){
            if(!callAfterFinish) {
                callAfterFinish();
                callAfterFinish = undifined;
            }
            isAnimating = false;
        });
        isAnimating = true;
    } else if(!callAfterFinish) {
        callAfterFinish = moveUp;
    }
}

Answer 2

假设您希望按键在动画进行过程中根本不起作用，这应该会有所帮助。当动画即将开始时，我将名为inProgress的变量设置为true。我在完成的动画处理程序中将其设置回false。在keydown处理程序中，我检查该标志，如果正在进行动画，我会忽略该键。

＆＃13;

var position = 50;
var inProgress = false;

function move() {
  inProgress = true;
  $('#box').animate({ top: position + 'px', duration: 1000 }, function () {
    inProgress = false;
  });
}

$(document).keydown(function(e) {
  if (inProgress) {
    return;
  }
  switch(e.which) {
    case 38:
      e.preventDefault();
      position -= 10;
      move();
      break;
    case 40:
      e.preventDefault();
      position += 10;
      move();
      break;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" style="position:absolute;top:50px;background-color:blue;width:50px;height:50px"></div>

＆＃13;

Answer 3

这是一个简单的解决方案。

if(isset($_GET['t']))$t = $_GET['t'];

var flag = true;
$(document).keydown(function(e) {
  if(flag == true){
  	switch (e.which) {
      case 38:
        moveUp();
        break;
      case 40:
        moveDown();
        break;
    }
  }
  
});



function moveDown() {
  $('#elem').animate({
    top: "100px"
  }, {
    duration: 1000,
    start: function(){ flag=false; },
    complete: function(){flag=true; }
  });
}

function moveUp() {
	
  $('#elem').animate({
    top: "0px"
  }, {
    duration: 1000,
   	start: function(){ flag=false; },
    complete: function(){flag=true; }
  });
}

Answer 4

我可能会建议您设置数据属性。

animate有一个完整的回调。因此，在开始动画之前，您可以将属性设置为false，并在动画完成时将此属性重置为true。

可以在keydown事件中测试此属性，以确定是否可以继续。

＆＃13;

$(function () {
  // set the data attribute to true
  $(document).data('isAnimateCompleted', true);

  $(document).keydown(function(e) {
    // if false return
    if ($(document).data('isAnimateCompleted') == false) {
      return;
    }
    switch(e.which) {
      case 38:
        moveUp();
        break;
      case 40:
        moveDown();
        break;
    }
  });
  function moveDown() {
    // before starting set to false
    $(document).data('isAnimateCompleted', false);
    $('#element').animate({top: "100px"}, 1000, function() {
      // when completed set to true
      $(document).data('isAnimateCompleted', true);
    });
  }
  
  function moveUp() {
    $(document).data('isAnimateCompleted', false);
    $('#element').animate({top: "0px"}, 1000, function() {
      $(document).data('isAnimateCompleted', true);
    });
  }
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div id="element" style="position: fixed;top: auto;">This is an element</div>

＆＃13;

另一种可能性是使用jQuery animated选择器来测试动画是否在进行中，避免所有全局变量。

javascript等待直到功能完成

4 个答案: