Javascript 逐个向dom元素添加多个类

我想用事件侦听器向我的div添加两个类，但我希望它添加一个列表，更新DOM，然后添加第二个类

当用户单击键

1

时，我需要将带有id应用程序的div移到顶部，然后移到左侧，但它同时向上和向左移动

文件
身体{
身高：100%；
宽度：100%；
背景图片：url（“TPHRG Floorplan 1.png”）；
背景重复：无重复；
背景附件：固定；
/*背景位置：中心*/
背景尺寸：980px400px，封面；
}
.机器人\u启动\u顶部{
顶部：280px；
过渡：前1名；
}
.机器人\启动\左{
位置：固定；
左：600px；
过渡：所有1；
}
.robot_end_左{
左：500px；
}
.robot_end_top{
顶部：180像素；
}
.机器人1_开始_左{
位置：固定；
左：600px；
过渡：左1秒；
}
.机器人1_结束_左{
左：400px；
}
让计数=0；
var move=函数（事件）{
如果（event.keyCode===97）{
const appDiv=document.getElementById（“应用”）；
setTimeout（函数（）{
appDiv.classList.add（“robot_end_top”）；
}, 0);
setTimeout（函数（）{
appDiv.classList.add（“robot_end_left”）；
}, 0);
}
如果（event.keyCode===98）{
const appDiv=document.getElementById（“应用”）；
appDiv.classList.add（“机器人1_end_left”）；
}
};

浏览器通常会让像您这样的JavaScript代码在不进行任何可视化操作的情况下进行大量DOM更新。他们将等待脚本退出（如事件处理程序）或脚本中的某些内容要求浏览器进行可视化更新，然后才能提供答案

在您的例子中，最简单的方法是将“second”类的添加延迟几秒钟；确切的时间取决于你想要它看起来像什么。你这样做的方式应该是

  setTimeout(() => { appDiv.classList.add("robot_end_left") }, 500);

---

500意味着在添加第二个类之前要等待500毫秒。

是否尝试添加timeout@RobertHovhannisyan有超时的版本看起来怎么样？你到底在等什么？“更新DOM”是什么意思？这里没有更改DOM的代码。你在等几秒钟吗？要完成动画？也没有理由使用外部站点进行代码演示。堆栈溢出直接支持此类功能。您必须向

setTimeout（）

传递一个数字第二个参数，指示等待的毫秒数。