JS-同步(Sync)與非同步(Async)-SetTimeout-SetInterval

JS-執行緒與同步(Sync)與非同步(Async)概念 這一篇有概述了同步(Sync)與非同步(Async)。

所以我們得把以前學得執行堆疊概念拿出來套用一下

接下來要繼續說明一下, 同步(Sync)與非同步(Async)的應用吧

[2022_11_02 新增SetInterval ]

參考資料: 六角學院

參考連結: 
談談JavaScript SetTimeout/SetInterval

給予小肝肝工程師支持吧'v': ETH/ERC20

JavaScript

function tost(){

console.log('烤土司');
}

function makecoffee(){

console.log('煮咖啡');
}

function callSomeone(someone){

   console.log('打給'+someone);

   setTimeout(function(){ 
    console.log("刷牙完成");
     },30)
}

function doWork(){
    var auntie ='漂亮阿姨'

    tost();
    callSomeone(auntie);
    makecoffee();
}

doWork();

SetTimeout() 用法

在講解執行順序之前, 我們會先說明事件佇列

在你執行到SetTimeout()所在的Function, 內部的陳述式會儲存到事件佇列。

先記起來!

SetTimeout()方法1

function functionname(someone){

   console.log('A');

   setTimeout(function(){ 
    console.log("B");
     },delaytime) 
}

SetTimeout() 的delaytime單位(ms)
SetTimeout() 要整個程式順序跑完以後才會執行
SetTimeout() 只執行一次就會結束!
SetTimeout( 非字串,delaytime ) 用這種方式, 主控台的執行效率會比較好

SetTimeout()方法2

function functionname(someone){

   console.log('A');


   setTimeout(function(){ 
    'console.log("B")';
     },delaytime) 
}

不同在於

SetTimeout( 字串,delaytime) 裡面陳述, 我們用純字串

這種方式在主控台的執行效率較不好。

執行順序

執行結果

SetInterval 用法

setInterval() 固定延遲了某段時間之後，才去執行對應的程式碼，然後「不斷循環」。

SetInterval 結構

var intervalID = scope.setInterval(func, delay[, 參數1, 參數2, ...]);
var intervalID = scope.setInterval(code, delay);

var timeInterval_process = window.setInterval(( () => console.log("Hello!") ), 1000);