javascript等待直到函数完成

我有一个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

，因为它会导致每个初始函数的延迟。

我建议您设置一个数据属性

具有完整的回调。因此，在开始动画之前，可以将属性设置为false，动画完成后，可以将该属性重置为true

可以在keydown事件中测试该属性，以决定是否继续

$（函数（）{
//将数据属性设置为true
$（document）.data（'isAnimateCompleted'，true）；
$（文档）.keydown（函数（e）{
//如果报税表有误
if（$（document.data（'isAnimateCompleted'）==false）{
返回；
}
开关（e.which）{
案例38：
moveUp（）；
打破
案例40：
向下移动（）；
打破
}
});
函数moveDown（）{
//在开始之前设置为false
$（document）.data（'isAnimateCompleted'，false）；
$（'#element'）。动画（{top:“100px”}，1000，function（）{
//完成后设置为true
$（document）.data（'isAnimateCompleted'，true）；
});
}
函数moveUp（）{
$（document）.data（'isAnimateCompleted'，false）；
$（'#element'）。动画（{top:“0px”}，1000，function（）{
$（document）.data（'isAnimateCompleted'，true）；
});
}
});

这是一个元素
这应该会对您有所帮助，我使用了动画的完整功能，在完成动画后立即执行下一个动作

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;
    }
}        

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


var位置=50；
var inProgress=假；
函数move（）{
inProgress=true；
$（'#box'）。动画（{top:position+'px'，duration:1000}，函数（）{
inProgress=假；
});
}
$（文档）.keydown（函数（e）{
如果（正在进行）{
返回；
}
开关（e.which）{
案例38：
e、 预防默认值（）；
位置-=10；
move（）；
打破
案例40：
e、 预防默认值（）；
位置+=10；
move（）；
打破
}
});

以下是简单的解决方案


var标志=true；
$（文档）.keydown（函数（e）{
如果（标志==真）{
开关（e.which）{
案例38：
moveUp（）；
打破
案例40：
向下移动（）；
打破
}
}
});
函数moveDown（）{
$（'#elem'）。设置动画({
顶部：“100px”
}, {
持续时间：1000，
start:function（）{flag=false；}，
完成：函数（）{flag=true；}
});
}
函数moveUp（）{
$（'#elem'）。设置动画({
顶部：“0px”
}, {
持续时间：1000，
start:function（）{flag=false；}，
完成：函数（）{flag=true；}
});
}

可能吗？执行1秒/超时秒？如果用户在播放动画时按下上/下键，您希望发生什么情况？他们的按键应该在动画完成后产生效果吗？或者应该忽略它？或者只使用
.stop（）
功能如果任何动画正在处理中，并且在
完成
回调中，我会使用
标志
，将其重置。。在其他情况下，如果标志为
true