Javascript 试图使用requestanimationframe进行对象跳转的代码无效

我正在尝试使用requestanimationframe进行对象跳转。finalposition变量包含对象应出现在页面底部上方的像素数

根据我的代码，对象应该平滑地移动到最大高度，然后平滑地向下移动，这两个事件都需要500毫秒的时间。但是当我运行代码时，对象立即出现在最大高度，然后在500毫秒内平滑地向下移动…如何使这两个事件在500毫秒内平滑地发生

let time = {
  start: null,
  total: 500
};
const moveup = now => {
  if (!time.start) time.start = now;
  time.elapsed = now - time.start;
  let progress = time.elapsed / time.total;
  let position = progress * finalPosition;
  obj.style.bottom = position + 'px';
  if (progress < 1) requestAnimationFrame(moveup);

};           

const movedown = now => {
  if (!time.start) time.start = now;
  time.elapsed = now - time.start;
  let progress = time.elapsed / time.total;
  let position = finalPosition*(1-progress);
  obj.style.bottom = position + 'px';
  if (progress < 1) requestAnimationFrame(movedown);

};       
function jump(){
    requestAnimationFrame(moveup);
    time.start=0;
    requestAnimationFrame(movedown);
} 
document.addEventListener('keydown',jump,false)

let time={
开始：空，
总数：500
};
const moveup=now=>{
如果（！time.start）time.start=now；
time.appeased=now-time.start；
让进度=time.appeased/time.total；
让位置=进度*最终位置；
obj.style.bottom=位置+px'；
如果（进度<1）请求动画帧（上移）；
};           
const movedown=now=>{
如果（！time.start）time.start=now；
time.appeased=now-time.start；
让进度=time.appeased/time.total；
让位置=最终位置*（1-进度）；
obj.style.bottom=位置+px'；
如果（进度<1）请求动画帧（向下移动）；
};       
函数跳转（）{
请求动画帧（向上移动）；
开始时间=0；
requestAnimationFrame（向下移动）；
} 
document.addEventListener（'keydown'，jump，false）

这里有几个问题

除非您的代码不完整，否则您在代码中的任何地方都没有最终位置

更重要的是，跳转函数没有正确地等待事件，整个函数一次运行，也就是说，它没有在运行movedown之前等待moveup，而是同时运行

大概您只观察到

movedown

的原因是这两种情况都发生在每一帧上，但是

movedown

发生在上移之后

看下面的代码片段，你会知道，我在这里做的是重新排列一些现有的代码。我已将第一个

movedown

调用移动到

moveup

循环的末尾，并在

movedown

的末尾重置时间

设最终位置=100；
让时间={
开始：空，
总数：500，
};
设obj=document.querySelector（'.foo'）；
const moveup=（现在）=>{
如果（！time.start）time.start=now；
time.appeased=now-time.start；
让进度=time.appeased/time.total；
让位置=进度*最终位置；
obj.style.bottom=位置+px'；
如果（进度<1）{
请求动画帧（向上移动）；
}否则{
time.start=0；
requestAnimationFrame（向下移动）；
}
};
const movedown=（现在）=>{
如果（！time.start）time.start=now；
time.appeased=now-time.start；
让进度=time.appeased/time.total；
让位置=最终位置*（1-进度）；
obj.style.bottom=位置+px'；
如果（进度<1）{
requestAnimationFrame（向下移动）；
}否则{
time.start=0；
}
};       
函数跳转（）{
请求动画帧（向上移动）；
}
document.addEventListener（'keydown'，jump，false）
.foo{
位置：绝对位置；
左：50%；
底部：0；
转化：translateX（-50%）translateY（-50%）；
}
.框架{
高度：150像素；
宽度：150px；
位置：绝对位置；
最高：50%；
右：50%；
转化：translateX（50%）translateY（-50%）；
背景色：#cdb；
}

我确实有一个最终位置。我没有将其包含在代码段中…但是为什么javascript会同时执行整个函数。它不应该先执行moveup，然后再执行movedown。例如，在这个链接中，两个语句都将被记录到控制台上，而不仅仅是第二个right@physics123你误解了什么requestAnimationFrame没有。代码按顺序执行。简单地说，requestAnimationFrame将函数排队等待以后运行。您的代码将两个函数同时放入队列中。然后，稍后，当requestAnimationFrame触发排队函数时，两个函数都将执行，并且它们的添加顺序相同。因此，您只能看到上次调用的函数的结果。