JavaScriptで一時停止を実現！3つの方法と10の応用例

JavaScriptで一時停止を実現JS
2023.04.08
この記事は約18分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで一時停止を実現する方法を習得し、応用例を手に入れることができます。

初心者の方でも分かりやすく解説し、サンプルコードも用意しているので、すぐに実践できるようになります。

JavaScriptにおける一時停止の方法

JavaScriptで一時停止を実現するには、主に次の3つの方法があります。

○ 方法1：setTimeoutを使用する

setTimeout関数は、指定した時間が経過した後に、一度だけ関数を実行することができます。

これにより、一定時間後に処理を実行することが可能です。

function hello() {
  console.log('Hello!');
}

setTimeout(hello, 3000); // 3秒後に'Hello!'と表示される

○ 方法2：Promiseとasync/awaitを使用する

JavaScriptの非同期処理にはPromiseがありますが、これとasync/awaitを組み合わせることで、一時停止のような動作を実現することができます。

下記のサンプルコードは、2秒間の一時停止を実現しています。

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

async function main() {
  console.log('Start');
  await sleep(2000);
  console.log('End');
}

main(); // "Start"と表示された後、2秒後に"End"と表示される

○ 方法3：setIntervalとclearIntervalを使用する

setInterval関数は、指定した時間ごとに関数を繰り返し実行することができます。

これにより、一定時間ごとに処理を行うことが可能です。

ただし、一時停止のような動作を実現するためには、clearInterval関数を使って繰り返しを停止する必要があります。

下記のサンプルコードは、1秒ごとにカウントアップし、5秒後にカウントを停止する例です。

let count = 0;

function countUp() {
  console.log(count++);
}

const intervalId = setInterval(countUp, 1000);

setTimeout(() => {
  clearInterval(intervalId);
}, 5000); // 5秒後にカウントが停止する

一時停止の応用例

JavaScriptで一時停止を利用することで、様々な効果や機能を実現することができます。

下記に10の応用例とそれぞれのサンプルコードを紹介します。

○ サンプルコード1：スライドショー

JavaScriptで一時停止を利用して、画像のスライドショーを作成できます。

下記のサンプルコードでは、3秒ごとに画像が切り替わるスライドショーを実現しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slideshow</title>
  <style>
    .slideshow {
      position: relative;
      width: 300px;
      height: 200px;
      overflow: hidden;
    }

    .slideshow img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s;
    }

    .slideshow img.active {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="slideshow">
    <img src="image1.jpg" alt="image 1" class="active">
    <img src="image2.jpg" alt="image 2">
    <img src="image3.jpg" alt="image 3">
  </div>
  <script>
    const images = document.querySelectorAll('.slideshow img');
    let currentIndex = 0;

    function changeImage() {
      images[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % images.length;
      images[currentIndex].classList.add('active');
    }

    setInterval(changeImage, 3000);
  </script>
</body>
</html>

○ サンプルコード2：アニメーション

一時停止を利用して、アニメーション効果を作成することができます。

下記のサンプルコードでは、1秒ごとに要素の位置が変わるアニメーションを実現しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation</title>
  <style>
    .box {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');
    let position = 0;

    function animate() {
      position += 10;
      box.style.left = position + 'px';
    }

    setInterval(animate, 1000);
  </script>
</body>
</html>

○ サンプルコード3：ローディング画面

一定時間経過後にローディング画面を非表示にすることができます。

下記のサンプルコードでは、3秒後にローディング画面が非表示になる例を示しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Screen</title>
  <style>
    .loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .loading h1 {
      color: white;
    }
  </style>
</head>
<body>
  <div class="loading">
    <h1>Loading...</h1>
  </div>
  <script>
    const loading = document.querySelector('.loading');

    function hideLoading() {
      loading.style.display = 'none';
    }

    setTimeout(hideLoading, 3000);
  </script>
</body>
</html>

○ サンプルコード4：テキストタイピングアニメーション

一時停止を利用して、テキストがタイピングされているかのようなアニメーションを作成することができます。

下記のサンプルコードでは、文字が1文字ずつ表示されるテキストタイピングアニメーションを実現しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing Animation</title>
</head>
<body>
  <h1 id="text"></h1>
  <script>
    const textElement = document.getElementById('text');
    const text = 'Hello, World!';
    let index = 0;

    function type() {
      if (index < text.length) {
        textElement.textContent += text[index];
        index++;
        setTimeout(type, 100);
      }
    }

    type();
  </script>
</body>
</html>

○ サンプルコード5：テキストの自動スクロール

下記のサンプルコードでは、テキストが自動で上から下へスクロールするアニメーションを実現しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto Scroll Text</title>
  <style>
    .scroll-text {
      font-size: 24px;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
    }
    .scroll-text span {
      display: inline-block;
      padding-left: 100%;
      animation: scroll 8s linear infinite;
    }
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  </style>
</head>
<body>
  <div class="scroll-text">
    <span>This is an example of auto-scrolling text. Enjoy!</span>
  </div>
  <script>
  </script>
</body>
</html>

○ サンプルコード6：マウスオーバー時の一時停止

下記のサンプルコードでは、マウスオーバー時にアニメーションが一時停止する例を示しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pause on Mouseover</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
      animation: move 4s linear infinite;
    }
    .box:hover {
      animation-play-state: paused;
    }
    @keyframes move {
      0% {
        left: 0;
      }
      100% {
        left: calc(100% - 100px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
  </script>
</body>
</html>

○ サンプルコード7：APIリクエスト間隔調整

APIリクエストの間隔を調整して、連続してリクエストを送信しないようにする例です。

async function fetchApiData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

async function requestDataWithInterval(urls, interval) {
  for (const url of urls) {
    const data = await fetchApiData(url);
    console.log(data);
    await new Promise(resolve => setTimeout(resolve, interval));
  }
}

const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3',
];
requestDataWithInterval(urls, 2000);

○ サンプルコード8：ゲームの一時停止機能

下記のサンプルコードでは、シンプルなゲームの一時停止機能を実装しています。Pキーを押すことでゲームが一時停止し、もう一度押すと再開します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Game Pause Function</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    let isPaused = false;

    function gameLoop() {
      if (!isPaused) {
        update();
        draw();
      }
      requestAnimationFrame(gameLoop);
    }

    function update() {
      // Update game objects
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // Draw game objects
    }

    document.addEventListener('keydown', (event) => {
      if (event.key === 'p' || event.key === 'P') {
        isPaused = !isPaused;
      }
    });

    gameLoop();
  </script>
</body>
</html>

○ サンプルコード9：デバッグ時の一時停止

デバッグ時に一時停止を利用する方法として、debuggerステートメントを使うことができます。

下記のサンプルコードでは、ボタンをクリックすると、debuggerステートメントが実行され、ブラウザの開発者ツールが開いている場合、コードの実行が一時停止します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Debug Pause Example</title>
</head>
<body>
  <button id="debugButton">Debug</button>
  <script>
    document.getElementById('debugButton').addEventListener('click', () => {
      debugger;
      console.log('This line will only run after resuming from the debugger.');
    });
  </script>
</body>
</html>

○ サンプルコード10：ユーザーの操作待ち

下記のサンプルコードでは、ユーザーがボタンをクリックするまで処理を一時停止させる方法を示しています。

Promiseとasync/awaitを利用しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Action Wait</title>
</head>
<body>
  <button id="waitButton">Click me to continue</button>
  <script>
    const waitButton = document.getElementById('waitButton');

    function waitForButtonClick() {
      return new Promise((resolve) => {
        waitButton.addEventListener('click', () => {
          console.log('Button clicked');
          resolve();
        }, { once: true });
      });
    }

    async function main() {
      console.log('Waiting for button click...');
      await waitForButtonClick();
      console.log('Button clicked, resuming execution');
    }

    main();
  </script>
</body>
</html>

注意点と対処法

  • 一時停止機能を実装する際は、ユーザーエクスペリエンスを考慮し、ユーザーがいつでも操作を再開できるようにしてください。
  • タイマー関数や非同期処理を使用する場合、メモリリークやパフォーマンス低下を防ぐために、必要に応じてイベントリスナーやタイマーを解除してください。

カスタマイズ方法

  • サンプルコードを参考にして、自分のプロジェクトやアプリケーションに適した一時停止機能を実装してください。
    必要に応じて、デザインや動作をカスタマイズしましょう。

まとめ

  • 一時停止機能は、様々なシーンで役立つ機能です。
    アニメーションやゲーム、APIリクエストなど、さまざまな場面で一時停止を活用できます。
  • サンプルコードを参考にして、自分のプロジェクトに適した一時停止機能を実装しましょう。
    注意点やカスタマイズ方法も確認して、ユーザーエクスペリエンスを向上させましょう。