CSS Animasyonlar JavaScript fonksiyonunu çalıştırırken

Question

ı bu javascript fonksiyonu var diyelim oyala. Yukarıdaki javascript işlevini çalıştırdığımda, işlev çalışırken spini durdurur. here'dan bahsettiğime bakın. Temel olarak javascript, css animasyonlarını durdurur ve nedenini merak ettim ya da başka birinin bunu fark etmesi durumunda bir çözüm buldum. Bunu bir setTimeout (fn, 0) 'a koymaya çalıştım, burada fn uzun süreçti, fakat sonra bunun neden işe yaramayacağını da anladı (js çok iş parçacıklı değil). Bunu gören oldu mu?

Güncelleme: İlginç bir şekilde, tarayıcı arayüzüyle etkileşim hala etkilense de, bu durumun Safari'deki bir sorun olmadığı anlaşılıyor.

Answer 1

Tarayıcı sayfası tek iş parçacıklı. Kullanıcı arayüzünü güncellemek, javascript programınızla aynı iş parçacığında gerçekleşir. Ayrıca Javascript kodu yürütülürken herhangi bir animasyonun yeni kareler çizmeyeceği anlamına gelir. Tipik olarak, bu büyük bir sorun değildir çünkü çoğu JS kodu çok hızlı bir şekilde tek bir animasyon çerçevesinden daha hızlı yürütülür.

En iyi tavsiyemiz basitçe şudur: Bunu yapma. JS motorunu bu kadar uzun süre kilitleme. Bunu yapmak için daha temiz bir yol bul.

---

Ancak, yapmanız gerekiyorsa, bir yolu vardır. HTML5's Web Workers API aracılığıyla ek bir iş parçacığı alabilirsiniz. Bu, eski tarayıcılarda desteklenmez, ancak ana web sayfasından ve kendi iş parçacığından bazı uzun süre çalışan CPU emme kodunu çalıştırmanıza izin verir ve daha sonra bu işlem tamamlandığında sayfanıza bir sonuç gönderir.