如何不使用JS setInterval自动识别JSON值变化？Web动态数据可视化需求

Hey there! Let's figure out how to solve this problem for your dynamic data visualization app. Since your JSON data updates on an unpredictable schedule (anywhere from 180ms to 16 seconds, roughly once a minute), setInterval isn't a great fit—it either wastes resources with overly frequent checks or misses updates if the interval's too long. Here are two solid solutions to get the exact display you want:

Core Idea #

Instead of rigid fixed-interval checks, we'll either:

• Poll for data at a reasonable interval and only update the UI when actual changes happen (adaptive polling)
• Let the backend push updates to us in real time (WebSocket, if your backend supports it)

Option 1: Adaptive Polling (Works Everywhere) #

This approach uses recursive setTimeout to fetch data on a regular basis, compares it to the last fetched value, and updates the UI only when a change is detected. You can tweak the polling interval to balance real-time responsiveness and performance.

Code Example

// Store the last fetched data to compare against
let lastData = null;

// Helper function to format dates into your desired "YYYY.MM.DD HH:mm" style
function formatDisplayDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}.${month}.${day} ${hours}:${minutes}`;
}

// Fetch data and update UI if needed
async function checkForUpdates() {
  try {
    // Replace this with your actual data endpoint URL
    const response = await fetch('/your-data-api-endpoint');
    const currentData = await response.json();
    
    // Convert the time value to a Date object (adjust if your backend returns a string)
    currentData.time = new Date(currentData.time);
    
    // Only update UI if the value has changed
    if (lastData && currentData.key !== lastData.key) {
      // Calculate the difference and format it with a + sign for positive values
      const valueDiff = currentData.key - lastData.key;
      const diffText = valueDiff > 0 ? `+${valueDiff}` : `${valueDiff}`;
      
      // Update the DOM elements with new values
      document.getElementById('current-value').textContent = currentData.key;
      document.getElementById('update-time').textContent = formatDisplayDate(currentData.time);
      document.getElementById('diff-value').textContent = diffText;
    }
    
    // Save the current data as the "last" value for next comparison
    lastData = { ...currentData };
    
    // Schedule the next check (1000ms = 1 second; adjust based on your needs)
    setTimeout(checkForUpdates, 1000);
  } catch (error) {
    console.error('Oops, failed to fetch data:', error);
    // If something goes wrong, retry after 5 seconds instead of immediately
    setTimeout(checkForUpdates, 5000);
  }
}

// Start the polling cycle
checkForUpdates();

Option 2: WebSocket Push (Most Efficient) #

If your backend can support WebSockets, this is the best choice. Instead of your app asking for data constantly, the server will send a message the moment the JSON updates. No wasted requests, no missed changes.

Code Example

let lastData = null;
function formatDisplayDate(date) { /* Same date formatter as above */ }

// Connect to your WebSocket endpoint
const socket = new WebSocket('ws://your-websocket-server-url');

socket.onopen = () => {
  console.log('WebSocket connected—ready for updates!');
};

// Handle incoming data from the server
socket.onmessage = (event) => {
  const currentData = JSON.parse(event.data);
  currentData.time = new Date(currentData.time);
  
  if (lastData) {
    const valueDiff = currentData.key - lastData.key;
    const diffText = valueDiff > 0 ? `+${valueDiff}` : `${valueDiff}`;
    
    // Update UI elements
    document.getElementById('current-value').textContent = currentData.key;
    document.getElementById('update-time').textContent = formatDisplayDate(currentData.time);
    document.getElementById('diff-value').textContent = diffText;
  }
  
  lastData = { ...currentData };
};

// Handle errors and reconnect if needed
socket.onerror = (error) => {
  console.error('WebSocket error:', error);
};

socket.onclose = () => {
  console.log('WebSocket disconnected—reconnecting in 5 seconds...');
  setTimeout(() => window.location.reload(), 5000);
};

Sample HTML UI #

Pair the JavaScript above with this simple HTML structure to show your data:

<div class="data-display">
  当前值：<span id="current-value">-</span>（更新于<span id="update-time">-</span>）
</div>
<div class="diff-display">
  差值：<span id="diff-value">-</span>
</div>

内容的提问来源于stack exchange，提问作者robin eu