实现页面特定时间自动刷新的技术方案咨询

Hey there! Let's work through your scheduled page reload requirements and fix that broken checkTime function.

First, let's diagnose the issues in your existing code:

• The condition hours >=17 || hours <=18 is always true (every hour is either ≥17 or ≤18), so it triggers an infinite loop of reloads every 5 seconds—definitely not what you want.
• It doesn't account for weekdays or the specific times you need (9:15 AM if opened at 9 AM, then 9:30 AM daily on workdays).

Step-by-Step Implementation Plan #

Here's how to meet your requirements properly:

1. Restrict to weekdays: Only run the logic if today is Monday to Friday.
2. Dynamic target time calculation:
   • If the page loads before 9:15 AM, first refresh at 9:15 AM, then every subsequent weekday at 9:30 AM.
   • If loaded between 9:15 AM and 9:30 AM, first refresh at 9:30 AM, then daily after that.
   • If loaded after 9:30 AM, next refresh is 9:30 AM on the next weekday.
3. Use setTimeout instead of setInterval: This avoids timing drift and lets us recalculate the next target time each time we reload, ensuring accuracy.

Corrected Code with Explanations #

function scheduleNextRefresh() {
  const now = new Date();
  const dayOfWeek = now.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday

  // Skip weekends—only run on Monday to Friday
  if (dayOfWeek === 0 || dayOfWeek === 6) {
    // Schedule next refresh for Monday 9:30 AM
    const daysToAdd = dayOfWeek === 0 ? 1 : 2; // Sunday → +1 day, Saturday → +2 days
    const nextMonday = new Date(now);
    nextMonday.setDate(now.getDate() + daysToAdd);
    nextMonday.setHours(9, 30, 0, 0); // Set exact time: 9:30:00.000
    const delay = nextMonday.getTime() - now.getTime();
    
    setTimeout(() => location.reload(), delay);
    return;
  }

  // Define today's key times
  const nineFifteen = new Date(now);
  nineFifteen.setHours(9, 15, 0, 0);
  const nineThirty = new Date(now);
  nineThirty.setHours(9, 30, 0, 0);

  let targetRefreshTime;

  if (now < nineFifteen) {
    // Page opened before 9:15 AM → first refresh at 9:15
    targetRefreshTime = nineFifteen;
  } else if (now < nineThirty) {
    // Page opened between 9:15 and 9:30 → first refresh at 9:30
    targetRefreshTime = nineThirty;
  } else {
    // Page opened after 9:30 → next refresh is 9:30 next weekday
    const nextWeekday = new Date(now);
    nextWeekday.setDate(now.getDate() + 1);
    
    // If next day is weekend, jump to Monday
    if (nextWeekday.getDay() === 6) {
      nextWeekday.setDate(nextWeekday.getDate() + 2);
    } else if (nextWeekday.getDay() === 0) {
      nextWeekday.setDate(nextWeekday.getDate() + 1);
    }
    
    nextWeekday.setHours(9, 30, 0, 0);
    targetRefreshTime = nextWeekday;
  }

  // Calculate delay in milliseconds and schedule reload
  const delayMs = targetRefreshTime.getTime() - now.getTime();
  setTimeout(() => location.reload(), delayMs);
}

// Start the schedule when the page finishes loading
window.addEventListener('load', scheduleNextRefresh);

Key Improvements Over Your Original Code #

• Weekday restriction: Ensures reloads only happen on workdays as requested.
• Smart time targeting: Automatically adjusts the first refresh time based on when the page is opened, covering your 9:15 AM requirement.
• Accurate scheduling: Uses setTimeout with recalculated delays to avoid timing drift, and handles weekends correctly.
• No infinite loops: Fixes the broken condition in your original code, so reloads only happen at the exact times you need.

Quick Notes #

• Browsers may throttle timers if the tab is inactive. For better reliability, you could add a check using the Page Visibility API to re-schedule when the tab becomes active again.
• If the user navigates away and comes back, the load event will trigger again, restarting the schedule correctly.

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