Czy framework pomoze?

Hej
ucze sie JS pisząc aplikacje gdzie cały czas na ekranie odswiezaja sie jakies dane, wykonuja sie animacje itp. Zauwazylem jednak problem kiedy zminimalizuje okno albo zmienie zakladke to wszystko zamiera i po powrocie czesc albo sie szybko odswieza albo nie. np licznik sekundowy zostaje zatrzymany i kiedy wracam do okna to nie widze aktualnego stanu tylko nagle odliczanie mega przyspiesza zeby nadrobic.

Jestem poczatkujacy ale zaczalem rozgladac sie nad rozwiazaniem, ktore pomoze mi uniknac tego problemu. Czy uzycie jakiegos frameworka rozwiaze ten problem? Bede mogl skupic sie na tworzeniu elementow a nie martwic sie ich stanem i odswiezaniem? Pomozcie mi pls i doradzcie.

Sam Framework niczego nie rozwiąże. JS nie jest wielowątkowy a z powodów optymalizacji przeglądarek jego procesy "w zakładkach" są "usypiane".
Jeśli masz kod , który coś robi "czasowo" to uzależnij funkcje "czasowe" od rzeczywistego zegara wszelkie setTimeout`y, timery mogą zachowywać się w sposób nieprzewidywalny. W szczególności gdy po ich wywołaniu wykonywane są zmiany w drzewie DOM wymagające renderowania. Efekt "przyspieszania czasu" wynika z tego, ze wszystkie operacje wywołane z timerów rzeczywiście się wykonały (niemal jednocześnie w momencie aktywowania zakładki bo ich "czas nadszedł"). Oczywiście w praktyce to bardziej złożony problem ale powierzchownie właśnie tak może się uwidaczniać.

A pokaż ten fragment kodu, który Ci "przyspiesza". Może wykrywanie aktywności zakładki załatwi sprawę

$([window, document]).blur(function() {
  // Clear timeout here
}).focus(function() {
  // start timeout back up here
});

Zaimplementowałem sobie coś podobnego i po wykryciu, że okno jest zmienione/zminimalizowane po prostu zatrzymuje wszystkie animacje, timery, biore timestamp i po aktywacji okna wszystko aktualizuje i odświeżam ale zastanawiam się czy istnieje jakiś prostszy sposób na to żeby nie robić tego "ręcznie".

karpov napisał(a):

Zaimplementowałem sobie coś podobnego i po wykryciu, że okno jest zmienione/zminimalizowane po prostu zatrzymuje wszystkie animacje, timery, biore timestamp i po aktywacji okna wszystko aktualizuje i odświeżam ale zastanawiam się czy istnieje jakiś prostszy sposób na to żeby nie robić tego "ręcznie".

Taka specyfika tego środowiska. Nic wiele lepszego genialnego tu nie wymyślisz.

Szkoda, dzięki za odpowiedzi :)

Bede mogl skupic sie na tworzeniu elementow a nie martwic sie ich stanem i odswiezaniem? Pomozcie mi pls i doradzcie.

W sensie w jaki sposób odświeżasz teraz elementy?

Czy te timeouty są koniecznie potrzebne, czy to tylko hak na to, żeby poszczególne elementy się aktualizowały wtedy, kiedy dane się zmienią?

Framework/biblioteka renderująca taka jak React nie pomoże ci w samych timeoutach (bo nie od tego ona jest, chociaż zapewne pod spodem ma jakieś schedulery), ale istnieje możliwość, że pomogłaby ci w zachowaniu synchronizacji między danymi a elementami na ekranie.

Ale nie wiem, ja bym się najpierw zastanowił, w jaki sposób teraz to rozwiązujesz. Być może w sposobie, który obecnie robisz, jest coś, co można zmienić nawet bez wchodzenia w nową technologię.

Powiem wprost. Robie sobie apke do grania w szachy więc: odlicza się czas, podczas ruchu odświeża się szachownica i wyświetla się nowy ruch w tabeli z historią partii, do tego czat.
Ale przychodzą również notyfikacje z serwera w stylu: za moment rozpocznie się turniej lub informacja dla aplikacji klienta, żę rozpoczęła się partia w turnieju i należy przenieść użytkownika na stronę z partią, jednak jak strona jest np zminimalizowana to tak się nie dzieje.

Ale przychodzą również notyfikacje z serwera w stylu

W jaki sposób przychodzą te notyfikacje? Jakiego rozwiązania używasz do komunikacji z serwerem?

Poprzez websockety. Napisałem kontroler który ogarnia sessionId przez co użytkownik może chodzić po stronie i za każdym łączyć się na nowo z serwerem na każdej stronie zachowując swoją sesję. Dzięki temu serwer może wysyłać do użytkownika notyfikacje np o zblizającym się turnieju do którego jest zarejestrowany.
Notyfikacje przychodzą jako json np:
{'type':'notification', 'action':'startgame', 'id':'123'}

Generalnie to aktualizować widok powinieneś wtedy, kiedy dostajesz dane, czyli np. po przyjściu danych z websocketa.

I teraz - co jeśli przełączysz się na inną stronę, to czy dalej dostajesz powiadomienie z websocketa? Weź spróbuj zrobić coś takiego w funkcji, która jest odpowiedzialna za przyjęcie danych z serwera:

document.title = Math.random(); 

a potem odpal i przełącz się na inną stronę w przeglądarce i zobacz, czy zmienia się tytuł taba (ta linijka tylko testowo oczywiście, potem można wywalić).

A jakoś się da to zrobić, bo Facebook to robi - jak dojdzie wiadomość, to nawet jak nie jesteś w Facebooku, to i tak się zmienia tytuł. To forum chyba też tak robi? Tak mi się wydaje przynajmniej.

Z tego co zauważyłem to dane przychodzą ale np cały widok się nie "renderuje" i muszę pilnować czy okno było widoczne czy nie. Jeżeli nie to po przywróceniu muszę ręcznie go odświeżyć.

LukeJL napisał(a):

A jakoś się da to zrobić, bo Facebook to robi - jak dojdzie wiadomość, to nawet jak nie jesteś w Facebooku, to i tak się zmienia tytuł. To forum chyba też tak robi? Tak mi się wydaje przynajmniej.

@Adam Boduch pomozesz?

Z tego co zauważyłem to dane przychodzą ale np cały widok się nie "renderuje" i muszę pilnować czy okno było widoczne czy nie. Jeżeli nie to po przywróceniu muszę ręcznie go odświeżyć.

Możesz zapisywać w jakiejś zmiennej fakt, że przyszły dane i zaistniała potrzeba zaktualizowania,

let shouldUpdate;
...
// przychodzą dane
shouldUpdate = true;
...
// kod, który się odpali po powrocie do danej karty:
if (shouldUpdate) update();
...
// funkcja która będzie aktualizować widok:
function update() {
  ... // odśwież swoje elementy
}

I wtedy odświeżysz widok dopiero, jak będziesz mógł, niezależnie od tego, kiedy ci przyjdą te nowe dane.

Dzięki za pomoc. Używam czegoś podobnego więc w sumie wychodzi na to, że nie da się inaczej i trzeba odświeżać widok po powrocie.