[Javascript/DHTML] Autorefresh 'flikkert'

[Glaanie]

Ja sorry voor deze wat vage titel, ik had niet meer ruimte...

Anyway, ik ben bezig met m'n eerste stapjes in AJAX. Nadat ik een tutorial op WebPasties.com heb gelezen over deze prachtige techniek, ben ik zelf aan de slag gegaan. Natuurlijk met het nodige knip en plakwerk, maar uiteindelijk heb ik de code zover aangepast dat ik een shoutbox had. Waarom een shoutbox, nou omdat dat een van de simpelste dingen is die gemaakt kunnen worden. Samen met een PHP/MySQL backend maak ik een shoutbox met twee vingers in de neus, bij wijze van spreken dan.
De shoutbox werkt in het kort als volgt:
- Je typt een naam + tekst in de invoerveldjes en klikt submit.
- Javascript checkt of deze niet te groot of te klein zijn, foutmelding volgt indien fout.
- Als alles klopt, wordt het hele spulletje naar een PHP script verstuurd, die ook een check uitvoert (beetje redundant, dat weet ik, maar ik wil uiteindelijk ook een non-javascript versie van mijn site maken).
- PHP stuurt de inhoud van de shoutbox weer terug, die vervolgens met een innerHTML dingetje worden geplaatst in de pagina.

Om ervoor te zorgen dat de shoutbox zich automagisch refresht elke x seconden, heb ik een setTimeOut() functie geplaatst in de functie die de shouts laat zien, zodat elke x seconden de functie opnieuw wordt aangeroepen om de shouts nogmaals uit de Database te halen en te tonen etc etc. Nou, over deze functie heb ik een vraag, als ik met mijn FireFox 1.0.6 M3 build Dutch kijk op de pagina, flikkeren de shouts even tijdens een autorefresh. In Internet Explorer 6.0 SP2 gebeurt dit niet, de shouts worden wel ververst, maar er flikkert niets.
Op zich werkt het allemaal, maar ik wil het flikkeren weghebben, ik wil gewoon een compleet gladde pagina, net als IE doet. Is dit 'by design' (vanuit FF gezien dan), of kan ik hier iets tegen doen?

Alvast bedankt!

[Borizz]

Ik denk dat het aan je implementatie ligt. Zoals ik het nu lees haal je steeds de volledige shouts opnieuw uit de database en die plaats je d.m.v. innerHTML in de pagina. Dit is niet erg efficient, omdat je elke keer alle data opnieuw ophaalt. En het heeft als bijwerking dat het dan kan gaan knipperen inderdaad. Het beste is dat je alleen de nieuwe berichten naar de gebruiker stuurt en deze toevoegd aan de pagina met DOM functies (document.createElement, element.appendChild, etc..) .

[Glaanie]

Hmm, goed punt. Op dit moment is her inderdaad zo dat alle shouts uit de db worden gehaald, echter is het de bedoeling dit door middel van een aangepaste query te beperken tot 10 of misschien wel 5, dan zal het knippereffect wel minder zijn, denk ik. Zoals ik al zei, is het slechts een kleine irritatie, het belemmert immers niet het gebruik van de pagina. En trouwens, zodra ik hiermee klaar ben, zal ik een geheel nieuwe website bouwen, waarin deze shoutbox in geplaatst zal worden, dus wie weet heb ik tegen die tijd wel weer een ander gek plan bedacht om het nóg mooier en nóg beter te maken
Bedankt voor je reactie, ik zal hier zeker over nadenken en aangezien ik nog nauwelijks met DOM heb gewerkt, zal dit misschien een goede leerschool zijn en zal ik het alsnog implementeren.