---
# System prepended metadata

title: JavaScript で 重たい処理を非同期実行する方法 2024-03-21
tags: [async, JavaScript, 非同期実行, setTimeout, await, 重たい処理, Promise]

---

---
lang: ja-jp
breaks: true
---
# JavaScript で 重たい処理を非同期実行する方法 2024-03-21

## 重たい処理

```javascript=
function generatePrimes(quota) {
    const primes = [];
    // 重たい処理
    return primes;
}
```

## 重たい処理を非同期メソッドにする

```javascript=
function generatePrimesAsync(quota) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const primes = generatePrimes(quota);
            resolve(primes);
            }, 0);
    });
}
```

## 正常な実行結果

```javascript=
const ret1 = generatePrimesAsync(quota); // すぐに抜ける。
const ret2 = await generatePrimesAsync(quota); // 結果が取得されるまで待機する。
```

:::warning
JavaScript自体がシングルスレッドで動作する為、本当の意味での非同期実行が行われていない。
よって、`await`中はUIスレッドがフリーズした状態となる。
:::

## ダメな例１

```javascript=
async function generatePrimesAsync(quota) {
    let promise = new Promise((resolve, reject) => {
        const primes = generatePrimes(quota);
        resolve(primes);
    });
    return promise;
}
```

```javascript=
const ret1 = generatePrimesAsync(quota); // 結果が取得されるまで待たされる。
const ret2 = await generatePrimesAsync(quota); // 結果が取得されるまで待機する。
```

## ダメな例２

```javascript=
async function generatePrimesAsync(quota) {
    let promise = generatePrimes(quota);
    return promise;
}
```

```javascript=
const ret1 = generatePrimesAsync(quota); // 結果が取得されるまで待たされる。
const ret2 = await generatePrimesAsync(quota); // 結果が取得されるまで待機する。
```

###### tags: `JavaScript` `重たい処理` `非同期実行` `Promise` `setTimeout` `async` `await`
