在我的扩展 popup.html 中使用 0ms 的 setTimeout 和不使用 setTimeout 之间的区别

Question

我的扩展 popup.html 页面上有一个切换按钮 true/false。该按钮有一个 0.4 的过渡动画。有时当打开弹出页面时，我可以看到按钮滑到它的最终位置，所以我将 CSS 中的默认过渡时间设置为零，并在 popup.html 加载后使用 JS 将其更改回 0.4。

我的初始化函数从 chrome 存储中读取值并将按钮设置在适当的位置。之后，它向我的复选框添加了一个新的 class，该复选框的过渡时间设置为 0.4 秒。如果我将 setTimeout 中的最后一步用 0 毫秒包装起来，它会起作用，但如果我不使用 setTimeout 并将 querySelector 留在同一个地方，那么样式应用得如此之快以至于我可以再次看到它在打开 popup.html 时发生。我的问题是为什么会这样？同样的事情不应该发生在 setTimeout 为零的情况下吗？

function init(){
   chrome.storage.sync.get(['switchState'], function(result) {
    var switchState = result.switchState;
    document.querySelector("input[type='checkbox']").checked = switchState;
    setTimeout(() => {
      document.querySelector(".slider").classList.add("animated-slider");
    }, 0);
   });
}
init();

.slider:before {
   position: absolute;
   content: "";
   height: 25px;
   width: 25px;
   left: 2.5px;
   bottom: 2.5px;
   background-color: white;
   transition: 0s;
   border-radius: 25px;
}
.animated-slider:before {
   transition: 0.4s;
}

Answer 1

当您使用 setTimeot 时，您的函数不会立即执行。它进入异步调用队列，并在引擎不忙于同步代码时执行。所以这个延迟给你的 css 工作一些时间。如果你想在这种情况下进行控制，你需要使用 transitionend event

在我的扩展 popup.html 中使用 0ms 的 setTimeout 和不使用 setTimeout 之间的区别

Difference between setTimeout with 0ms and not using setTimeout in my extension's popup.html

javascript

settimeout

google-chrome-extension