【定期実行/バックグラウンド処理】フロントエンドのポーリング処理について📝

// ポーリング関数
function polling(interval, endpoint, callback) {
  let lastData = null; // 前回のデータを保存する変数

  // ポーリング関数を呼び出す関数
  function checkData() {
    fetch(endpoint)
      .then(response => response.json())
      .then(data => {
        // レスポンスのデータが変化した場合は、コールバック関数を実行
        if (JSON.stringify(data) !== JSON.stringify(lastData)) {
          lastData = data;
          callback(data);
        }
        // 次のポーリングを実行
        setTimeout(checkData, interval);
      })
      .catch(error => {
        console.error("Error during polling:", error);
        // エラーが発生した場合、再試行する
        setTimeout(checkData, interval);
      });
  }

  // 初回のポーリングを開始
  setTimeout(checkData, interval);
}

// ポーリングを開始する
polling(5000, "/api/data", function(data) {
  // データの更新処理
  console.log("Received new data:", data);
  // 例: HTML要素のテキストを更新
  document.getElementById("dataDisplay").textContent = JSON.stringify(data);
});