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

Door Yoop Overmaat op 18-01-2015 19:25 gewijzigd op 18-01-2015 19:28

1.861 views

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.


<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?

Wouter J

18-01-2015 19:38 gewijzigd op 18-01-2015 19:38

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 lang=js](function reloadGame() {
$('#game').load('/php/gamelist.php', function () {
setTimeout(reloadGame, 1000);
});
})();[/code]

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

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 lang=js]var $game = $('#game');
(function reloadGame() {
$game.load('/php/gamelist.php', function () {
setTimeout(reloadGame, 1000);
});
})();[/code]

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 lang=js]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);[/code]

Yoop Overmaat

18-01-2015 19:52

Heel erg bedankt voor de uitleg & de voorbeelden hoe het beter kan.

Reageren

Inloggen om te reageren