Jquery/Javascript实现网页指定区域按序定时切换并自动刷新内容

Got it, let's fix this step by step. Your original multiple setInterval approach caused chaos because you were targeting the same div with conflicting timers—no wonder the content was out of order. The div-switching logic you found works great for consistent rotation, now we just need to tie in dynamic content refresh for each panel without reloading the whole page.

Step 1: Update Your HTML Structure #

First, set up distinct content panels (we'll hide them by default with CSS):

<div id="responsecontainer">
  <div id="div1" class="content-panel"></div>
  <div id="div2" class="content-panel"></div>
  <div id="div3" class="content-panel"></div>
</div>

<style>
.content-panel {
  display: none; /* Hide all panels initially */
  width: 100%;
  height: 100%;
}
</style>

Step 2: Combine Rotation + Content Refresh Logic #

We'll create a reusable function to refresh content for any panel, then integrate it with your existing rotation flow. This ensures every time a panel comes into view, it loads the latest data from your ColdFusion files:

$(function() {
  // Map each panel to its corresponding ColdFusion content file
  const contentSources = [
    "content/1.cfm",
    "content/2.cfm",
    "content/3.cfm"
  ];
  
  const panels = $('.content-panel');
  let counter = 0;

  // Function to refresh content for a specific panel
  function refreshPanel(panelIndex) {
    const targetPanel = panels.eq(panelIndex);
    const sourceUrl = contentSources[panelIndex];
    
    // Load fresh content, disable cache to ensure latest DB data
    targetPanel.load(sourceUrl, function() {
      // Optional: Add a callback for post-load actions
      console.log(`Refreshed panel ${panelIndex + 1} with updated data`);
    });
  }

  // Function to switch panels and ensure fresh content
  function showNextPanel() {
    // Hide all panels first
    panels.hide();
    
    // Calculate which panel to show next
    const currentIndex = counter % panels.length;
    
    // Refresh content BEFORE displaying the panel
    refreshPanel(currentIndex);
    
    // Show the updated panel
    panels.eq(currentIndex).show('fast');
    
    counter++;
  }

  // Disable AJAX caching globally to avoid stale content
  $.ajaxSetup({ cache: false });

  // Initialize: Show first panel with fresh content
  showNextPanel();

  // Rotate panels every 10 seconds (adjust interval as needed)
  setInterval(showNextPanel, 10 * 1000);
});

Key Improvements & Explanations #

• No More Timer Conflicts: A single setInterval handles rotation, so panels switch in a reliable, ordered sequence.
• Always Fresh Content: The refreshPanel function pulls the latest .cfm output right before the panel is displayed, ensuring you get up-to-date database data every time.
• Easy Maintenance: Storing content sources in an array lets you add/remove panels later without rewriting core logic.
• Cache Prevention: Global AJAX cache disabling ensures browsers never serve stale cached versions of your ColdFusion content.

ColdFusion Side Note #

Double-check your .cfm files don't have server-side caching (like cfcache tags) that might override client-side cache prevention. You want each request to fetch fresh data directly from the database.

This setup is ideal for your wall display use case—smooth, consistent rotation with dynamically updated content, no full page reloads required.

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