Odśwież zawartość strony automatycznie co określony czas – jQuery

Jeśli chcesz odświeżyć stronę albo jej część co x sekund, potrzebujesz tylko trochę javascriptu. Przedstawię kilka podstaw za pomocą jQuery

Najważniejsza funkcja/metoda

To podstawowa metoda javascriptu, która pozwala na wywołanie jakiejś funkcji co każde x milisekund. Można o tym przeczytać więcej na stronie w3schools.com

Będę ją wykorzystywać we wszystkich moich przykładach. Pierwsze dwa parametry są wymagany, a trzeci opcjonalny. Pamiętaj że 1s = 1000ms.

Dla przykładu, jeśli chcę wywołać funkcję moja_funkcja() co 5 sekund (5 sekund * 1000 = 5000ms) wystarczy, że napiszę tak:

Odświeżanie całej strony

Czasem potrzebujemy odświeżyć całą stronę. Nie jest to teraz zbyt powszechne ponieważ nie jest to najlepsze dla wydajności (choć wszystko zależy od kontekstu i gdzie to zastosujemy), ale należy o tym wpsomnieć. Tak więc aby odświeżyć stronę co 5 sekund nasz kod wyglądałby tak:

Odświeżanie fragmentu strony

Jeśli potrzebujesz odświeżyć zawartość jakiegoś div-a na stronie, możesz użyć funckji load() z jQuery. 

Dla lepszego zrozumienia spójrz na przykład poniżej:

Można zauważyć że co 5 sekund div o id=”odswiez” jest aktualizowany. Oczywiście nasze divy w hml-u mogą wyglądać tak:

Użyłam dwóch osobnych kontenerów, aby widoczne były zmiany i działanie funkcji. Można oczywiście wpisać adres innej strony, albo wysłać jakieś dane, jednak to jest częściej wykorzystywane podczas interakcji z użytkownikiem, a nie przy automatycznym odświeżaniu.

Jeśli chcesz zobaczyć coś jeszcze bardziej skomplikowanego, zobacz część drugą automatycznego odświeżania ajaxem.

  • Share it on Twitter
  • Share it on Facebook
  • Share it on Pinterest
  • Share it on Google+
  • Share it on LinkedIn

Comments (15)Add comment

Take part in the discussion

Use pastebin.com or jsfiddle.net to add your code snippets
Your email address will not be published.