Разница между setTimeout с 0ms и отсутствием использования setTimeout в popup.html моего расширения - PullRequest
Новая
       6

Разница между setTimeout с 0ms и отсутствием использования setTimeout в popup.html моего расширения

0 голосов
/ 11 февраля 2019

У меня есть кнопка переключения true / false на моей странице popup.html расширений.Кнопка имеет анимацию перехода 0,4.Иногда при открытии всплывающей страницы я мог видеть, как кнопка сдвигается в конечное положение, поэтому я устанавливаю время перехода по умолчанию в CSS на ноль и использую JS, чтобы изменить его на 0,4 после загрузки popup.html.

Моя функция инициализации читаетзначение из хранилища Chrome и устанавливает кнопку в правильном положении.После этого он добавляет новый класс в мой чекбокс, для которого установлено время перехода 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;
}

1 Ответ

0 голосов
/ 11 февраля 2019

Когда вы используете setTimeot, ваша функция не выполняется мгновенно.он попадает в очередь асинхронных вызовов и будет выполняться, когда механизм не будет занят синхронным кодом.Так что эта задержка даст некоторое время вашим работам CSS.Если вы хотите иметь контроль в этой ситуации, вам нужно использовать transitionend event

...