Valt dit script nou onder de houtje-touwtje oplossingen of niet?
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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>
<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
Dit kun je het beste oplossen door setTimeout te gebruiken:
Code (js)
1
2
3
4
5
2
3
4
5
(function reloadGame() {
$('#game').load('/php/gamelist.php', function () {
setTimeout(reloadGame, 1000);
});
})();
$('#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)
1
2
3
4
5
6
2
3
4
5
6
var $game = $('#game');
(function reloadGame() {
$game.load('/php/gamelist.php', function () {
setTimeout(reloadGame, 1000);
});
})();
(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)
1
2
3
4
5
6
7
8
9
10
11
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);
(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