JavaScript遅延実行の完全ガイド！7つの方法でマスター

はじめに

この記事を読めばJavaScriptで遅延実行をマスターすることができるようになります。

遅延実行は、特定の処理を遅らせて実行することで、ウェブページのパフォーマンスやUXを向上させる重要なテクニックです。

下記では、遅延実行の7つの方法を詳しく解説し、サンプルコードを用いて実践的な応用例も紹介します。

JavaScriptの遅延実行とは

JavaScriptで遅延実行とは、ある処理を実行するタイミングを遅らせることです。

遅延実行を利用することで、ページの読み込み速度やパフォーマンスを向上させたり、イベント発火のタイミングをコントロールすることが可能になります。

遅延実行の方法

JavaScriptで遅延実行を実現する方法はいくつかあります。

下記では、代表的な7つの方法を紹介します。

○setTimeout

setTimeout関数は、指定した時間（ミリ秒）が経過した後に、指定した関数を実行するための方法です。

下記のサンプルコードは、2秒後にコンソールに「Hello, World!」と表示する例です。

setTimeout(function() {
  console.log('Hello, World!');
}, 2000);

○setInterval

setInterval関数は、指定した時間（ミリ秒）ごとに指定した関数を繰り返し実行する方法です。

下記のサンプルコードは、1秒ごとにコンソールに「Hello, World!」と表示する例です。

setInterval(function() {
  console.log('Hello, World!');
}, 1000);

○Promiseとasync/await

Promiseとasync/awaitを使った遅延実行は、非同期処理の実行順序を制御する方法です。

下記のサンプルコードは、2秒後にコンソールに「Hello, World!」と表示する例です。

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedHello() {
  await delay(2000);
  console.log('Hello, World!');
}

delayedHello();

○requestAnimationFrame

requestAnimationFrameは、ブラウザの描画タイミングに合わせて指定した関数を実行する方法です。

下記のサンプルコードは、次の描画タイミングでコンソールに「Hello, World!」と表示する例です。

requestAnimationFrame(function() {
  console.log('Hello, World!');
});

○デバウンスとスロットリング

デバウンスとスロットリングは、高頻度で発生するイベント（例：スクロールやリサイズ）の処理を制御する方法です。

デバウンスは、イベント発火後に一定時間が経過したら処理を実行し、スロットリングは一定時間ごとに処理を実行します。

○イベントリスナー

イベントリスナーを使った遅延実行は、特定のイベントが発生した時に処理を実行する方法です。

例えば、ボタンがクリックされた時に関数を実行するサンプルコードは下記の通りです。

document.querySelector('button').addEventListener('click', function() {
  console.log('Button clicked!');
});

○Web Worker

Web Workerを使った遅延実行は、バックグラウンドで処理を実行する方法です。

これにより、メインスレッドの処理をブロックせずに、重い処理を実行することができます。

遅延実行の応用例

遅延実行は、さまざまなシーンで活用できます。

下記では、遅延実行を応用した実践的なサンプルコードを4つ紹介します。

○サンプルコード1：スクロールイベントの最適化

下記のサンプルコードは、デバウンスを使ってスクロールイベントの処理を最適化する例です。

let timer;

window.addEventListener('scroll', function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    console.log('Scrolled');
  }, 200);
});

○サンプルコード2：画像の遅延読み込み

下記のサンプルコードは、画像が表示領域に入った時に読み込む遅延読み込みの例です。

document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));

  function lazyLoad() {
    lazyImages.forEach(function(img) {
      if (img.getBoundingClientRect().top <= window.innerHeight && img.getAttribute('data-src')) {
        img.src = img.getAttribute('data-src');
        img.removeAttribute('data-src');
      }
    });
  }

  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  lazyLoad();
});

○サンプルコード3：アニメーションの実装

下記のサンプルコードは、requestAnimationFrameを使ったアニメーションの実装例です。

function animate() {
  const element = document.querySelector('.box');
  let start;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;

    element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';

    if (progress < 2000) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

animate();

○サンプルコード4：非同期APIリクエスト

下記のサンプルコードは、async/awaitを使って非同期APIリクエストを行う例です。

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

fetchData();

注意点と対処法

遅延実行を利用する際には、注意点がいくつかあります。

下記に挙げる注意点を把握し、適切な対処法を行ってください。

setTimeoutやsetIntervalの実行タイミングは、ブラウザの状況によっては遅れることがあります。
これは、ブラウザが他の処理でビジー状態の場合や、ページがバックグラウンド状態の場合があります。
対処法として、requestAnimationFrameを使うことで、ブラウザの描画タイミングに合わせて処理を実行できます。
setTimeoutやsetIntervalで登録したコールバック関数は、グローバルスコープで実行されます。
そのため、関数内でthisを使った場合、意図しない挙動が発生することがあります。
対処法として、アロー関数を使うことで、thisの値を保持できます。
高頻度で発生するイベントの処理は、パフォーマンスに悪影響を与えることがあります。
対処法として、デバウンスやスロットリングを利用して、処理の頻度を制限できます。
async/awaitを使って非同期処理を実行する際、エラー処理を適切に行わないと、Promiseの中で発生したエラーがキャッチされずにプログラムが停止することがあります。
対処法として、try-catch文を使ってエラー処理を行ってください。