Javascript hangt vast na intervaltijd

Door Bryan De Baar op 17-10-2020 20:28

1.825 views

Hallo,

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



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

Wie o wie kan mij vertellen wat er mis gaat?

- Ariën -

17-10-2020 20:47

Kan je het niet in de JavaScript console van je browser bekijken?

R Rob Doemaarwat

17-10-2020 21:03

1) Volgens mij staat er een haakje verkeerd bij de aanroep van die function(d, s, id)


//nu
}(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.

B Bryan De Baar

17-10-2020 21:28

setTimeout had ik ook al geprobeerd maar niet onderaan de pagina.
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 ;)

B Bryan De Baar

19-10-2020 22:41

Ook als ik setTimeout helemaal onderaan de pagina zet dan hangt javascript helemaal vast.
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?

R Rob Doemaarwat

19-10-2020 22:57

Zoals Ariën al aangaf: wat staat er in de console van je browser?

B Bryan De Baar

21-10-2020 00:26

De console blijft leeg, geen enkele waarschuwing / errors. Heel vreemd :/

- Ariën -

21-10-2020 00:59

En met een [i]console.log('Blaah');[i/] in de code?

Reageren

Inloggen om te reageren