求助：浏览器多标签页下流媒体播放列表循环JS脚本运行异常

Hey there! Let’s dig into why running 10 instances of your script across tabs is causing problems, and walk through practical fixes to get things running smoothly.

1. Uncontrolled Timers Draining Browser Resources #

Each tab’s setInterval/setTimeout runs independently, and when you have 10 of them churning out DOM queries and clicks, it’s easy to overload your browser’s CPU and memory. On top of that, browsers throttle timers in background tabs (Chrome limits background intervals to at least 1 second), which can mess up your song-switch timing and create scheduling chaos.

Fixes: #

• Pause timers when tabs are in the background: Use the visibilitychange event to stop the timer when the tab isn’t visible, and restart it when it comes back into focus:

  let intervalId;
  
  function startSongSwitcher(intervalSeconds) {
    intervalId = setInterval(handleSongSwitch, intervalSeconds * 1000);
  }
  
  function stopSongSwitcher() {
    clearInterval(intervalId);
  }
  
  // Listen for tab visibility changes
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      stopSongSwitcher();
    } else {
      startSongSwitcher(/* your x value */);
    }
  });
  
  // Initialize on script load
  startSongSwitcher(/* your x value */);
  

• Use requestIdleCallback for heavy DOM work: Wrap any DOM queries or clicks in this API to let the browser run them only when it has free resources, reducing competition across tabs:

  function handleSongSwitch() {
    requestIdleCallback(() => {
      // Your song-switch logic here (find next button, check track position, etc.)
    });
  }
  

2. Cross-Tab Interference from Shared State #

If your script uses shared storage like localStorage to track playlist position, 10 tabs reading/writing the same keys will overwrite each other’s data, causing random jumps or loop failures.

Fix: #

• Isolate tab state: Add a unique identifier to your storage keys, tied to the specific tab’s URL, so each instance uses its own data:

  // Create a unique key for the current tab's playlist state
  const tabUniqueKey = `tidal_loop_${btoa(window.location.href)}`;
  
  // Use this key for all storage operations
  localStorage.setItem(tabUniqueKey, JSON.stringify({ currentTrackIndex: 3 }));
  const savedState = JSON.parse(localStorage.getItem(tabUniqueKey) || '{}');
  

3. Fragile DOM Selectors Causing Unhandled Errors #

Streaming sites frequently update their DOM structure, so if your script relies on unstable class names (like .next-btn-123), it’ll throw errors when selectors break. 10 tabs spitting out uncaught errors can slow down your browser or crash scripts entirely.

Fixes: #

• Use stable attributes for element selection: Prioritize aria-label, data-* attributes, or element roles over class names—these are less likely to change with site updates:

  // More reliable way to find the next track button
  const nextButton = document.querySelector('[aria-label="Next Track"]');
  

• Add error handling to prevent script crashes: Wrap your core logic in a try/catch block to catch errors and keep the script running:

  function handleSongSwitch() {
    try {
      const nextButton = document.querySelector('[aria-label="Next Track"]');
      const isLastTrack = /* Your logic to check for final playlist track */;
  
      if (isLastTrack) {
        const firstTrack = document.querySelector('[data-track-position="0"]');
        firstTrack?.click();
      } else {
        nextButton?.click();
      }
    } catch (err) {
      console.error('Song switch failed:', err);
      // Optional: Add a retry delay here if needed
    }
  }
  

4. Inefficient Polling vs. Event-Driven Logic #

If your script polls the page every x seconds to check if a song ended, that’s wasted resources. 10 tabs doing this nonstop adds up fast.

Fix: #

• Listen for media element events instead: Hook into the ended event of the page’s audio/video element—this triggers only when a song finishes, eliminating unnecessary polling:

  function setupMediaEventListener() {
    // Find the active media element
    const mediaEl = document.querySelector('audio, video');
    if (!mediaEl) return;
  
    // Remove old listener to avoid duplicates
    mediaEl.removeEventListener('ended', onTrackEnded);
    mediaEl.addEventListener('ended', onTrackEnded);
  }
  
  function onTrackEnded() {
    const isLastTrack = /* Your final track check logic */;
    
    if (isLastTrack) {
      document.querySelector('[data-track-position="0"]')?.click();
    } else {
      document.querySelector('[aria-label="Next Track"]')?.click();
    }
  
    // Re-setup listener for the next track's media element
    setTimeout(setupMediaEventListener, 1000);
  }
  
  // Initialize on script load
  setupMediaEventListener();
  

Try implementing these changes one by one—start with the event-driven media listener and background timer pause, as those will have the biggest impact on resource usage.

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