Javascript hangt vast na intervaltijd
Om de snelheid van mijn site te optimaliseren wil ik een aantal scripts die niet direct nodig zijn later in laden.
Ik ben begonnen om de messenger chatplugin van Facebook 4 seconden te laten wachten.
Na de vier seconden hangt Javascript in de browser helemaal vast en werkt alles wat met Javascript verbonden is niet meer.
Zelfs de meest simpele klik events
Dit is wat ik gedaan heb
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--START CHAT-->
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script type="text/javascript">
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') {
clearInterval(stateCheck);
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v4.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/nl_NL/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
document.body.innerHTML += '<div class="fb-customerchat" attribution=setup_tool page_id="474291026057052" theme_color="#F1504E" logged_in_greeting="Hi! Waarmee kunnen we je helpen?" logged_out_greeting="Hi! Waarmee kunnen we je helpen?"></div>';
}
}, 4000);
</script>
<!--END CHAT-->
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script type="text/javascript">
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') {
clearInterval(stateCheck);
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v4.0'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/nl_NL/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
document.body.innerHTML += '<div class="fb-customerchat" attribution=setup_tool page_id="474291026057052" theme_color="#F1504E" logged_in_greeting="Hi! Waarmee kunnen we je helpen?" logged_out_greeting="Hi! Waarmee kunnen we je helpen?"></div>';
}
}, 4000);
</script>
<!--END CHAT-->
Wie o wie kan mij vertellen wat er mis gaat?
Code (php)
1
2
3
4
2
3
4
//nu
}(document, 'script', 'facebook-jssdk'));
//moet volgens mij zijn (eerst anon function afsluiten, dan aanroepen)
})(document, 'script', 'facebook-jssdk');
}(document, 'script', 'facebook-jssdk'));
//moet volgens mij zijn (eerst anon function afsluiten, dan aanroepen)
})(document, 'script', 'facebook-jssdk');
2) Waarom doe je dit met een setInterval en dan die check op 'complete'? Zet gewoon een setTimeout in een script blokje helemaal op het eind van de HTML (net voor de </body>) en je hebt die hele readyState check niet nodig.
Deze had ik vrijwel bovenaan gezet waardoor dit het zelfde deed als de code hier boven.
Ik ga het nu onderaan de pagina zetten zoals je aangeeft ;)
Na wat testen blijkt dat dit alleen gebeurt bij de Facebook chat.
Laad ik Facebook direct in is er geen probleem, wat zou dat kunnen zijn?