Asynchrone JavaScript
"Ek sal later klaarmaak!"
Funksies wat parallel met ander funksies loop, word asinchronies genoem
'n Goeie voorbeeld is JavaScript setTimeout()
Asynchrone JavaScript
Die voorbeelde wat in die vorige hoofstuk gebruik is, was baie vereenvoudig.
Die doel van die voorbeelde was om die sintaksis van terugbelfunksies te demonstreer:
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 die voorbeeld hierbo, myDisplayeris die naam van 'n funksie.
Dit word deurgegee myCalculator()as 'n argument.
In die regte wêreld word terugroepe meestal met asinchrone funksies gebruik.
'n Tipiese voorbeeld is JavaScript setTimeout().
Wag vir 'n Time-out
Wanneer jy die JavaScript-funksie gebruik setTimeout(), kan jy 'n terugbelfunksie spesifiseer wat uitgevoer moet word met tyd-uit:
Voorbeeld
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
In die voorbeeld hierbo myFunctionword dit as 'n terugbel gebruik.
myFunctionword setTimeout()as argument deurgegee.
3000 is die aantal millisekondes voor tyd-uit, dus
myFunction()sal na 3 sekondes geroep word.
Wanneer jy 'n funksie as 'n argument deurgee, onthou om nie hakies te gebruik nie.
Regs: setTimeout (myFunction, 3000);
Verkeerde:setTimeout(myFunction(), 3000);
In plaas daarvan om die naam van 'n funksie as 'n argument na 'n ander funksie oor te dra, kan jy altyd 'n hele funksie in plaas daarvan deurgee:
Voorbeeld
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
In die voorbeeld hierbo function(){ myFunction("I love You !!!"); }
word dit as 'n terugbel gebruik. Dit is 'n volledige funksie. Die volledige funksie word as 'n argument na setTimeout() oorgedra.
3000 is die aantal millisekondes voor tyd-uit, dus
myFunction()sal na 3 sekondes geroep word.
Wag vir intervalle:
Wanneer jy die JavaScript-funksie gebruik setInterval(), kan jy 'n terugbelfunksie spesifiseer wat vir elke interval uitgevoer moet word:
Voorbeeld
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
In die voorbeeld hierbo myFunctionword dit as 'n terugbel gebruik.
myFunctionword setInterval()as argument deurgegee.
1000 is die aantal millisekondes tussen intervalle, so
myFunction()sal elke sekonde genoem word.
Wag vir lêers
As jy 'n funksie skep om 'n eksterne hulpbron (soos 'n skrif of 'n lêer) te laai, kan jy nie die inhoud gebruik voordat dit volledig gelaai is nie.
Dit is die perfekte tyd om 'n terugbel te gebruik.
Hierdie voorbeeld laai 'n HTML-lêer ( mycar.html), en vertoon die HTML-lêer in 'n webblad, nadat die lêer volledig gelaai is:
Wag vir 'n lêer:
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 die voorbeeld hierbo myDisplayerword dit as 'n terugbel gebruik.
myDisplayerword getFile()as argument deurgegee.
Hieronder is 'n kopie van mycar.html:
mycar.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>