animacja się zatrzymuje podczas wykonywania funkcji

Question

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.

Comments

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.

---

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.

---

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).

---

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.

Answer 1

Problem rozwiązałem poprzez użycie bilbioteki https://spin.js.org/

Niestety nie rozumiem jak to działa, ale na razie to mi wystarczy.