【JavaScript】setTimeoutを用いた、非同期処理入門

【JavaScript】setTimeoutを用いた、非同期処理入門:

概要

setTimeoutを用いて、非同期処理の処理順をまとめました。

コールバック -> Promise -> async/await の順に説明する。

setTimeout

基本構文

setTimeout('コールバック関数', 'タイムアウト時間') 

1秒後にhogeを出力する。

function callback(){ 
    console.log('hoge') 
} 
 
setTimeout(callback, 1000) 

無名関数を用いて書く。

setTimeout(function(){ console.log('hoge') }, 1000) 

アロー演算子を用いて書く。

setTimeout(() => { console.log('hoge') }, 1000) 

アロー演算子を用いて書く。(中括弧を省略)

setTimeout(() => console.log('hoge'), 1000) 

処理順

非同期処理の処理順を確認する。

console.log(1) 
setTimeout(() => console.log(2), 1000) 
console.log(3) 
 
// 1 -> 3 -> 2 

timeout時間 0秒 でも、処理順は変わらない。

console.log(1) 
setTimeout(() => console.log(2), 0) 
console.log(3) 
 
// 1 -> 3 -> 2 

コールバック地獄

非同期処理が複数重なると、コールバック地獄に陥る。

setTimeout(() => { 
    console.log(1) 
    setTimeout(() => { 
        console.log(2) 
        setTimeout(() => { 
            console.log(3) 
        }, 1000) 
    }, 1000) 
}, 1000) 
 
// 1 -> 2 -> 3 

コールバック地獄の回避方法

Promise化すると、thenを用いたメソッドチェーンで処理を繋げられる。

const promiseTimeout = new Promise(function(resolve) { 
    setTimeout(function() { 
        console.log(2) 
        resolve() 
    }, 1000) 
}) 
 
console.log(1) 
promiseTimeout.then(function() { console.log(3) }) 
 
// 1 -> 2 -> 3 

Promiseとアロー演算子を用いた場合

const promiseTimeout = new Promise(resolve => 
    setTimeout(() => { 
        console.log(2) 
        resolve() 
    }, 1000) 
) 
 
console.log(1) 
promiseTimeout.then(() => console.log(3)) 
 
// 1 -> 2 -> 3 

async関数内で、Promise関数にawaitを用いると、同期的に処理できる。

function promiseTimeout() { 
    return new Promise(function(resolve) { 
        setTimeout(function() { 
            console.log(2) 
            resolve() 
        }, 1000) 
    })  
} 
 
async function asyncFunc() { 
    console.log(1) 
    await promiseTimeout() 
    console.log(3) 
} 
 
asyncFunc() 
 
// 1 -> 2 -> 3 

async/await とアロー演算子を用いた場合

const promiseTimeout = () =>  
    new Promise(resolve =>  
        setTimeout(() => { 
            console.log(2) 
            resolve() 
        }, 1000) 
    ) 
 
const asyncFunc = async () => { 
    console.log(1) 
    await promiseTimeout() 
    console.log(3) 
} 
 
asyncFunc() 
 
// 1 -> 2 -> 3 

setTimeoutをPromise化した、sleep関数で書き直してみる。

const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms)) 
 
const asyncFunc = async () => { 
    await sleep(1000) 
    console.log(1) 
    await sleep(1000) 
    console.log(2) 
    await sleep(1000) 
    console.log(3) 
} 
 
asyncFunc() 
 
// 1 -> 2 -> 3 

まとめ

非同期処理の処理順をまとめました。

async/await を用いることで、とても簡潔に書けます。

間違い・指摘等があればコメントお願いします。