JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


Asynchrone JavaScript

"Ik zal later eindigen!"

Functies die parallel lopen met andere functies worden asynchroon genoemd

Een goed voorbeeld is JavaScript setTimeout()

Asynchrone JavaScript

De voorbeelden die in het vorige hoofdstuk werden gebruikt, waren erg vereenvoudigd.

Het doel van de voorbeelden was om de syntaxis van callback-functies te demonstreren:

Voorbeeld

function myDisplayer(something) {
  document.getElementById("demo").innerHTML = something;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

In het bovenstaande voorbeeld myDisplayeris de naam van een functie.

Het wordt doorgegeven myCalculator()als argument.

In de echte wereld worden callbacks het vaakst gebruikt met asynchrone functies.

Een typisch voorbeeld is JavaScript setTimeout().


Wachten op een time-out

Wanneer u de JavaScript-functie gebruikt setTimeout(), kunt u een callback-functie specificeren die bij time-out moet worden uitgevoerd:

Voorbeeld

setTimeout(myFunction, 3000);

function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

In het bovenstaande voorbeeld myFunctionwordt gebruikt als een callback.

myFunctionwordt doorgegeven setTimeout()als argument.

3000 is het aantal milliseconden vóór de time-out, dus myFunction()wordt na 3 seconden gebeld.

Wanneer u een functie als argument doorgeeft, vergeet dan niet om haakjes te gebruiken.

Rechts: setTimeout(myFunction, 3000);

Mis: setTimeout(mijnFunctie(), 3000);

In plaats van de naam van een functie als argument door te geven aan een andere functie, kun je in plaats daarvan altijd een hele functie doorgeven:

Voorbeeld

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

In het bovenstaande voorbeeld function(){ myFunction("I love You !!!"); } wordt gebruikt als een callback. Het is een volledige functie. De volledige functie wordt als argument doorgegeven aan setTimeout().

3000 is het aantal milliseconden vóór de time-out, dus myFunction()wordt na 3 seconden gebeld.


Wachten op intervallen:

Wanneer u de JavaScript-functie gebruikt setInterval(), kunt u een callback-functie specificeren die voor elk interval moet worden uitgevoerd:

Voorbeeld

setInterval(myFunction, 1000);

function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

In het bovenstaande voorbeeld myFunctionwordt gebruikt als een callback.

myFunctionwordt doorgegeven setInterval()als argument.

1000 is het aantal milliseconden tussen intervallen, dus myFunction()wordt elke seconde genoemd.


Wachten op bestanden

Als u een functie maakt om een ​​externe bron te laden (zoals een script of een bestand), kunt u de inhoud niet gebruiken voordat deze volledig is geladen.

Dit is het perfecte moment om terug te bellen.

Dit voorbeeld laadt een HTML-bestand ( mycar.html), en geeft het HTML-bestand weer op een webpagina, nadat het bestand volledig is geladen:

Wachten op een bestand:

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}

getFile(myDisplayer);

In het bovenstaande voorbeeld myDisplayerwordt gebruikt als een callback.

myDisplayerwordt doorgegeven getFile()als argument.

Hieronder een kopie van mycar.html:

mijnauto.html


<img src="img_car.jpg" alt="Nice car" style="width:100%">

<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels.</p>

<p>(Wikipedia)</p>