jQuery AJAX页面加载：未重复引入JS却被执行两次问题求助

Hey David, let's break down this tricky issue you're dealing with—there's nothing more head-scratching than code running twice when you swear you've eliminated duplicates, and scripts loading even after you've commented out their injection logic. Let's walk through possible causes and fixes step by step.

First: Why is the JS still loading even after commenting the injection line? #

If you've commented out the code that appends the JS file but it's still showing up in network requests, here are the most likely culprits:

• Browser Cache: Your browser might be serving the JS from its local cache instead of making a new request. Test this by opening DevTools (F12), going to the Network tab, checking "Disable cache", then doing a hard refresh (Ctrl+Shift+R). If the JS stops loading, you know cache was the issue.
• Hidden Injection Points: That slimmed-down function might not be the only place loading the JS. Search your entire codebase for other instances of dynamic script creation, fetch/XMLHttpRequest calls loading that JS file, or even framework-specific lazy-loading logic that's still triggering the load.
• Inline JS Residue: If the JS was ever injected inline (not as an external file), there might be leftover inline code in your DOM that's still executing, even if you stopped loading the external file. Check your page's HTML source (or inspect elements) for any unexpected inline <script> tags.

Second: Why is the JS executing twice with no duplicate code visible? #

Even if you don't see duplicate JS in the document, double execution usually comes down to one of these scenarios:

• Duplicate AJAX Requests: Your code might be triggering the page-fetching AJAX call twice. Check the Network tab to see if two identical requests are being sent—this could happen if you've bound the request logic to an event that fires twice (e.g., a click event bound both to a button and its parent container, or a route change hook that runs multiple times).
• Unclean DOM Insertion: If you're appending AJAX-fetched content to a container instead of replacing it, old JS from previous loads might still be in the DOM and re-executing. For example, using container.appendChild(newContent) instead of clearing the container first could leave old script tags (or elements that trigger JS) in place.
• Event Listener Duplication: If you're attaching event listeners (like addEventListener or framework-specific mounted hooks) inside a function that runs multiple times, you'll end up with duplicate listeners that each trigger the JS logic. Always check if you're removing listeners when they're no longer needed, or using a guard clause to prevent re-binding.
• Browser Request Retries: Rare but possible—if your AJAX request hits a network blip, some browsers will automatically retry it, leading to two successful responses and two executions of your callback. The Network tab will show two requests here, often with slightly different timestamps.

Practical Fixes to Try #

1. Prevent Duplicate Script Loading:

   • Add a global guard variable before loading the JS:

     if (!window.myCriticalScriptLoaded) {
       // Your script injection code here
       window.myCriticalScriptLoaded = true;
     }
     

   • Use a module system (ES Modules, CommonJS) to handle script dependencies—most modern module loaders automatically prevent duplicate imports.

2. Stop Double Execution:

   • Cancel Unfinished AJAX Requests: Use AbortController to cancel pending requests before triggering a new one. For example:

     let abortController;
     function fetchPage() {
       if (abortController) abortController.abort();
       abortController = new AbortController();
       fetch('/your-page-url', { signal: abortController.signal })
         .then(response => response.text())
         .then(html => {
           // Replace container content instead of appending
           document.getElementById('content-container').innerHTML = html;
         });
     }
     

   • Clean DOM Before Insertion: Always clear the target container's content before inserting new AJAX-fetched HTML to eliminate old script/element residue.
   • Guard Against Duplicate Listeners: Use a flag to ensure listeners are only added once:

     let isListenerBound = false;
     function initPage() {
       if (!isListenerBound) {
         document.getElementById('btn').addEventListener('click', handleClick);
         isListenerBound = true;
       }
     }
     

Start with checking the Network tab and console logs (add a timestamped console.log to your JS to confirm double execution) to narrow down exactly where the issue is coming from—this will save you a ton of guesswork.

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