Valt dit script nou onder de houtje-touwtje oplossingen of niet?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yoop Overmaat

Yoop Overmaat

18/01/2015 19:25:07
Quote Anchor link
Ik ben al een tijdje bezig met een dynamische spelletjes site op basis van html, css, javascript, jquery & php.
Het probleem is altijd de verschrikkelijke 3 div refresh geweest onder een xmlhttprequest. Op aanraden van een kennis van me toch maar eens overgestapt op een javascript framework c.q. jquery.

Het script is net getest & werkt.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="/js/jquery-1.11.2.js"></script>
<script>

$(document).ready(function(){

var timeout1 = setInterval(reloadgame,1000);
function reloadgame(){
$('#game').load('/php/gamelist.php');
                     }

var timeout2 = setInterval(reloadplay,3000);
function reloadplay(){
$('#playlist').load('/php/playlist');
                     }
                            
var timeout3 = setInterval(reloadchat,1000);
function reloadchat(){
$('#$roomchat').load('/php/output.php');
                     }
                   });

</script>


Iets zegt me vaag dat het houtje touwtjeswerk is. Kan dit beter of is dit gangbaar?
Gewijzigd op 18/01/2015 19:28:31 door Wouter J
 
PHP hulp

PHP hulp

29/03/2024 01:20:04
 
Wouter J

Wouter J

18/01/2015 19:38:20
Quote Anchor link
Ik raad altijd af om setInterval met AJAX requests te gebruiken. Stel de AJAX request duurt langer dan 1 of 3 seconden, dan bouwt er een wachtrij op in de interval aangezien interval telkens zal uitvoeren. Niet echt goed voor je performance als je dit een tijdje laat runnen zonder de wachtrij leeg te maken.

Dit kun je het beste oplossen door setTimeout te gebruiken:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
(function reloadGame() {
    $('#game').load('/php/gamelist.php', function () {
        setTimeout(reloadGame, 1000);
    });
})();


De speciale (function () { ... })() syntax maakt een functie aan en roept die meteen ook aan


Een andere performance tip: Je laat JavaScript nu elke loop de hele DOM tree (de complete HTML structuur) doorzoeken opzoek naar #game, #playlist en #$roomchat. Dat is natuurlijk niet echt goed voor de performance. Je kunt beter de elementen 1 keer opzoeken en daarna telkens die gebruiken:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
var $game = $('#game');
(
function reloadGame() {
    $game.load('/php/gamelist.php', function () {
        setTimeout(reloadGame, 1000);
    });
})();


Als laatste zie je dat je 3 keer praktisch dezelfde code hebt. In zo'n geval kun je dit beter omzetten naar een generieke functie en die 3 keer aanroepen:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
function reload($elem, url, interval) {
    (
function doReload() {
        $elem.load(url, function () {
            setTimeout(doReload, interval);
        });
    })();
}


reload($('#game'), '/php/gamelist.php', 1000);
reload($('#playlist'), '/php/playlist', 3000);
reload($('#$roomchat'), '/php/output.php', 1000);
Gewijzigd op 18/01/2015 19:38:46 door Wouter J
 
Yoop Overmaat

Yoop Overmaat

18/01/2015 19:52:51
Quote Anchor link
Heel erg bedankt voor de uitleg & de voorbeelden hoe het beter kan.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.