Hey there, let's figure out why your fetch call is firing twice on each interval. Let's start by breaking down possible causes and actionable fixes:

First, Confirm the Root of the Issue #

First, let's add a quick log to your function to verify whether the function itself is being called twice (not just the fetch request appearing duplicated in devtools):

API = { 
  get_processed_autodesk_results : function(){ 
    // Add this log to track when the function runs
    console.log(`Fetch triggered at: ${new Date().toLocaleTimeString()}`);
    fetch('/api/results', { 
      method: 'get', 
      headers: { 
        'Accept': 'application/json, text/plain, */*', 
        'Content-Type': 'application/json' 
      } 
    }).then(res=>res.json()) 
      .then(function(res) { 
        console.log(res); 
      }); 
  } 
}
const fetchInterval = setInterval(API.get_processed_autodesk_results, 5000);
// Log the interval ID to check for duplicate timers
console.log('Active interval ID:', fetchInterval);

If you see two Fetch triggered at logs every 5 seconds, that confirms the function is being invoked twice—here are the most likely reasons:

Common Causes & Fixes #

1. Duplicate setInterval Registrations #

This is the most frequent culprit. Your code might be running the setInterval line twice, creating two separate timers that both fire every 5 seconds.

How to verify:

• Check the Active interval ID log. If you see two different IDs in the console, you’ve got duplicate timers.
• Ensure your script isn’t loaded twice in your HTML (e.g., two <script> tags pointing to the same JS file, or a module being imported multiple times).
• If using a framework like React/Vue: Confirm you’re not creating the timer in a lifecycle hook that runs repeatedly (e.g., React’s useEffect without an empty dependency array).

Fix:

• Always store your interval ID and clear it before creating a new one to avoid duplicates:

  // Declare a global variable to hold the interval ID
  let fetchInterval;
  
  // Clear existing interval before creating a new one
  if (fetchInterval) {
    clearInterval(fetchInterval);
  }
  fetchInterval = setInterval(API.get_processed_autodesk_results, 5000);
  

• For React users, use useEffect with a cleanup function to prevent duplicate timers:

  useEffect(() => {
    const interval = setInterval(API.get_processed_autodesk_results, 5000);
    // Clean up the interval when the component unmounts
    return () => clearInterval(interval);
  }, []); // Empty dependency array ensures this runs only once
  

2. Accidental Extra Calls to the Function #

Check if other code in your project is calling API.get_processed_autodesk_results independently of the timer. Examples include:

• A click event listener on a button that triggers the function
• A page load event that calls it once (plus the timer)
• Another interval/timeout that’s also invoking the function

3. Browser Extension or DevTools Interference #

Sometimes debugging extensions (like ad blockers, proxy tools, or request modifiers) can interfere with network requests and make them appear duplicated. Test your page in incognito mode (which disables most extensions) to rule this out.

Final Checks #

After applying these fixes, recheck your console and Network tab in devtools. If the issue persists, look at the "Initiator" column for each request—it’ll show exactly what’s triggering the call, helping you pinpoint unexpected invokers.

内容的提问来源于stack exchange，提问作者Mike Johnson Jr