Day24 Javascript 異步處理函數

2022 iThome 鐵人賽

DAY 24

Modern Web

Javascripts惡補小教室系列第 24 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-10-09 11:51:00

736 瀏覽

分享至

異步處理函數是甚麼意思呢? 上一篇我們提到了先等a函數執行完再執行b函數，而這個過程就被稱為異步處理函數，有時需要等待函數加載完出現執行結果後，再套入到令一個函數裡，我們就可以很好的利用異步處理來達成我們所需的效果。

等待函數
在JS裡有個函數能讓我們等待一段時間後再執行函數，這個方法就是setTimeout()，設定延遲。讓我們來看看例子吧。

<!DOCTYPE html>
<html>
<body>

<h1 id="demo"></h1>

<script>
setTimeout(myAction, 3000);

function myAction() {
  document.getElementById("demo").innerHTML = "hello world!!";
}
</script>

</body>
</html>

在上述例子中，我們使用setTimeout方法，第一個帶入的是我們要執行的函數，第二個帶入的是我們要延遲的秒數，單位是以毫秒計算，3000就等於3秒，結果就是3秒後執行myAction函數。

這邊要注意，第一個帶入的函數不能加上括號!當函數被作為參數傳遞時，請記得不要加上括號。

setTimeout(myAction, 3000);  //正確

setTimeout(myAction(), 3000);//錯誤

當然也可以換個方式寫，在第一個帶入的參數裡執行寫函數。

setTimeout(function() { myAction("Hello world!!"); }, 3000);

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

而function裡面的函數就可以帶入參數執行!

間隔時間執行函數
若是我們今天需要每隔一段時間就執行函數呢? 像是時鐘的例子，我們每隔一秒鐘就需要將時間更新在innerHtml上，JS有沒有這種方法供我們使用呢? 答案是有的，這時候我們就必須使用到setInterval()方法。

setInterval()
setInterval()方法，間隔設定的時間後執行函數。

<!DOCTYPE html>
<html>
<body>

<h1 id="demo"></h1>

<script>
setInterval(myAction, 1000);

function myAction() {
  let x = new Date();
  document.getElementById("demo").innerHTML=
  x.getHours() + ":" +
  x.getMinutes() + ":" +
  x.getSeconds();
}
</script>

</body>
</html>

透過獲取時間的方法，我們每秒利用setInterval()方法帶入myAction()及等待間隔的時間，每秒把時間印在id="demo"的標題h1上，就可以成為一個很好的時間顯示器!

那我們今天的介紹就到這邊了!明天再讓我們一起努力吧。