animacja się zatrzymuje podczas wykonywania funkcji

pytanie zadane 23 lipca 2021 w JavaScript przez mikolaj.k Obywatel (1,430 p.)

Mam taki przykład:

https://codepen.io/reti/pen/YzVEqxr

Po naciśnięciu "Download PDF" albo "Render PDF" animacja się zatrzymuje. Rozumiem, że jest to związane z jednowątkowością JS i trzeba zmienić kod na asynchroniczny, zgadza się? Czy idę w ogóle dobrym tropem? Jeżeli tak, to nad czym dokłądnie powinienem się skupić? Na Promise? Studiuję już trochę temat asynchroniczności, ale nadal to jest dla mnie czarna magia.

Po co mi to?

Czasami renderowane PDF-y mają duże rozmiary (szczególnie gdy zawierają grafikę) i trzeba trochę poczekać. Wtedy powinien pojawić się loader.

komentarz 23 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)

Masz na myśli, że ten GIF się całkiem zatrzymuje czy przywiesza na chwilę? Bo na CodePen nie widzę, żeby to zatrzymywało po naciśnięciu wspomnianych przycisków, ale chyba delikatnie się przycina na moment.

komentarz 23 lipca 2021 przez mikolaj.k Obywatel (1,430 p.)

Dzięki za odpowiedź. Chodziło mi o to, że przywiesza na chwilę, ale ta chwila wydłuża się w zależności od wielkości PDF.

komentarz 23 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, w kodzie ustawiasz jakąś opcję PDFJS.disableWorker, podczas gdy ta biblioteka raczej nie ma takiej opcji (przejrzyj źródło kodu, który podpinasz na CodePen). W każdym razie, mógłbyś procesowanie PDF-a wykonać właśnie w Workerze (czyli pójść w wykorzystanie osobnego wątku) i wynik przesłać do głównego wątku, aby wrzucić go w DOM (sam Worker na to nie pozwala).

komentarz 24 lipca 2021 przez mikolaj.k Obywatel (1,430 p.)

Dzięki wielkie i przepraszam za zamieszanie. Potrzebny jest mi tylko eksport do pliku. Ta część kodu, która umożliwia podgląd na stronie jest mi do niczego niepotrzebna i powinienem ją wywalić z codepena (co właśnie zrobiłem). Swoją drogą tam coś też chyba nie gra, bo przy dużych plikach (np. ze zdjęciami) trwa to bardzo wolno. Stąd pomysł wyświetlania spinnera.