Asynchronous JavaScript

"I will finish later!"

Ang mga function na tumatakbo sa parehong oras ng ibang function ay tinatawag na asynchronous (asynchronous)

Isang mahusay na halimbawa ay JavaScript setTimeout()

Asynchronous JavaScript

Ang mga halimbawa na ginamit sa nakaraang kabanata ay lubos na pinapadaliin.

Ang layunin nito ay ipakita ang syntax ng callback function:

Maaaring itakda ang callback function para sa bawat intervalo:

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

亲自试一试

d.getSeconds();myDisplayer ay ang pangalan ng function.

Ito ay pinapakilala bilang argumento sa myCalculator();。

Sa tunay na mundo, ang callback ay palaging ginagamit kasama ang asynchronous function.

Isang tipikal na halimbawa ay JavaScript setTimeout();。

Maghihintay ng timeout

Hinihintay ang intervalo: setTimeout(); Sa panahon na ito, maaaring ipakilala ang callback function na dapat maisagawa kapag nagpapatuloy ang timeout:

Maaaring itakda ang callback function para sa bawat intervalo:

setTimeout(myFunction, 3000);
setInterval(myFunction, 1000);
  document.getElementById("demo").innerHTML = "I love You !!";
}

亲自试一试

在上面的示例中，Sa itaas na halimbawa, ginagamit bilang callback.

函数（函数名）作为参数传递给 setTimeout();。

Ginagamit bilang callback. Ito ay isang buong function. Ang buong function ay ipinasa bilang argumento sa setTimeout(). 1000 ay ang mga milisegundo sa pagitan ng bawat intervalo, kaya。

Kapag ibibigay mo ang function bilang argumento, huwag gamitin ang mga pagsasalita.

Tama: setTimeout(myFunction, 3000);

Maling: setTimeout(myFunction(), 3000);

Kung hindi mo ibibigay ang pangalan ng function bilang argumento sa ibang function, palaging puwedeng ibibigay ang buong function:

Maaaring itakda ang callback function para sa bawat intervalo:

magbigay ng hinihiling sa function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  function myFunction(value) {}}
}

亲自试一试

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

Ginagamit bilang callback. Ito ay isang buong function. Ang buong function ay ipinasa bilang argumento sa setTimeout(). 1000 ay ang mga milisegundo sa pagitan ng bawat intervalo, kaya。

3000 ay ang mga milisegundo bago ma timeout, kaya 3 seconds pagkatapos ay magtawag

Hinihintay ang intervalo: myFunction Sa paggamit ng JavaScript function

Maaaring itakda ang callback function para sa bawat intervalo:

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

亲自试一试

d.getSeconds();Sa itaas na halimbawa, 用作回调。

函数（函数名）作为参数传递给 myFunction。

setInterval() 1000 ay ang mga milisegundo sa pagitan ng bawat intervalo, kaya myFunction()

Tatlong beses bawat segundo.

Hinihintay ang file

Kung ikaw ay gumagawa ng function upang i-load ang panlabas na resource (tulad ng script o file), ang mga nilalaman ay hindi maaring gamitin bago matapos ma-load ang nilalaman.

Ito ang pinakamahusay na panahon upang gamitin ang callback.mycar.html），saan ay ipapakita ang HTML file sa web page kapag nakatapos na ma-load ang file：

Hinihintay ang file:

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);
    }
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

亲自试一试

在上面的示例中，myDisplayer 用作回调。

函数（函数名）作为参数传递给 getFile()。

以下是 mycar.html 的副本：

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>汽车是一种有轮子的、自供电的机动车，用于交通。</p>
<p>大多数关于这个术语的定义都指出，汽车主要是为了在道路上行驶而设计的，可以容纳一到八人，通常有四个轮子。</p>
<p>(Wikipedia)</p>