JavaScript是同步编程语言，不是吗

javascript is synchronous programming language, isn't it?

本文关键字：编程语言 同步 JavaScript      更新时间：2023-09-26

我尝试旋转图像，然后设置其过渡："变换2s"。这是我的代码：

var nodeList = document.querySelectorAll(".top-slide-container ul li");
nodeList[0].style.transition = "transform 0s";
nodeList[0].style.transform = "rotateY(90deg)";
nodeList[0].style.transition = "transform 2s";

当我运行此代码时。结果和我想的不一样。图像旋转 2 秒。谁能解释为什么它在 0 秒内没有这样做？JavaScript是同步编程语言，不是吗？

是的，Javascript 是同步运行的。但浏览器渲染是另一回事。然而，浏览器渲染（和处理风格实际上是一个单独的过程）通常在Javascript执行时被阻止。因此，在浏览器尝试执行更改之前，代码第二行中应用的样式设置将被第四行覆盖。

好吧，伙计，我看到您对执行逻辑有点困惑，所以我可以尝试向您解释一下运行代码时幕后发生的事情。

1. nodeList[0].style.transition = "transform 0s";

这只是为应用中的指定元素设置转换 css 规则。

  1. 然后你添加一个 csss 转换，这也很好

  2. nodeList[0].style.transition = "transform 2s";

好吧，这实际上是在前 2 行代码之后调用的，但是，因为 JavaScript 在非常小的几分之一秒（~1ms）内"读取"了一行代码，这将几乎立即覆盖您的第一个断言。

JavaScript 按照您在文本编辑器中编写代码的顺序执行一行接一行，但是它不会等到 DOM 用代码更新。它只是跑，伙计！

Javascript是同步的，但它不会"阻止/锁定"UI。浏览器将呈现（异步）。

我假设您想在动画完成后更改属性？

这里有一些用于 css 动画的库。在那里的文档中，他们描述了如何"您还可以检测动画何时结束："

function doSomething(){
  alert('Animation End');
}
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

开源库：https://github.com/daneden/animate.css

相关文章：