0

Upon a certain user interaction (a button click) I try to dynamically load a CSS file and a script file in my webpage and it worked fine. The CSS files bring in a few styles which get applied to the webpage. In the Javascript file, I have put some code inside a setInterval() which gets executed from an IIFY so that the code can run infinitely at a 1-second interval.

But when I tried to unload(remove) them, the CSS file gets removed easily but the script file is creating a problem. By removing <link rel="stylesheet" href="res/demo.css"> from the index.html file, the styles brought in by it gets removed from index.html also. By removing the <script src="res/demo.js"></script> the underlying code keeps on running.

Sample code in the GIT repo:

https://github.com/anirbannath/loading-unloading-css-js.git

How can I stop the scripts and flush out the memory it takes other than refreshing the page entirely?

ProgrammerForFun
  • 43
  • 5
  • Does this answer your question? [remove appended script javascript](https://stackoverflow.com/questions/9390445/remove-appended-script-javascript) – Joeri Apr 29 '20 at 16:17
  • The script tag can be removed from DOM but the underlying script still works. Can there be a solution to stop and flush out the underlying script? – ProgrammerForFun Apr 29 '20 at 16:20
  • 1
    You can disable a stylesheet by setting [disabled](https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet/disabled) property. I'm not aware of actual unloading of either of these. There's [an old answer](https://stackoverflow.com/questions/9390445/remove-appended-script-javascript/9471916#9471916) of mine about scripts, but that's more experimental and hackish ... – Teemu Apr 29 '20 at 16:38

1 Answers1

0

If you have an anonymous interval then you can loop through all the intervals and stop them without touching the script that you're importing (So it works for 3rd party scripts):

//Your imported script file
(function() {
  setInterval(() => {
    console.log('Hello again!')
  }, 1000)
})()

//Your main script file
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
  for (var i = 1; i < 99; i++) {
      window.clearInterval(i);
  }
  //remove script
})
<a href="javascript:;" class="btn">STOP IT!</a>

OR

If you have DO have control over the imported script, then you can:

  1. Give the IIFE a name to be able to reassign it later
  2. Create a variable outside of the IIFE
  3. Assign the interval to that variable inside the IIFE
  4. When you click the button then first clear the interval and then reassign the variables to something else (making it eligible for garbage collection) and finally remove the script tag.

//Your imported script file
let interval;
(function theFunc() {
  interval = setInterval(() => {
    console.log('Hello again!')
  }, 1000)
})()

//Your main script file
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
  clearInterval(interval)
  interval = null;
  theFunc = null;
  //remove script
})
<a href="javascript:;" class="btn">STOP IT!</a>
Community
  • 1
  • 1
Ludolfyn
  • 1,806
  • 14
  • 20
  • 1
    this is assuming you have full control over the contents of the script and from the GitHub page I got the impression that that's not the case – Joeri Apr 29 '20 at 17:25
  • 1
    You're right yes, @Joeri , that is assuming that. He is adding the demo.js from his own folder structure and not from a third party, so I assume it's possible. – Ludolfyn Apr 29 '20 at 17:32
  • 2
    quick variation on your answer. This would work on third party scripts as well, thought it's not as elegant. https://jsfiddle.net/6chLbq72/ – Joeri Apr 29 '20 at 17:43
  • Yeah, these solutions I know. As @Joeri said, I am trying to use a 3rd party library and do not have control over it. Is there a way out for that? – ProgrammerForFun Apr 30 '20 at 10:01
  • You could load them with an xhr and insert them like this. https://jsfiddle.net/6chLbq72/ – Joeri Apr 30 '20 at 10:07
  • 1
    Okay @ProgrammerForFun , I've updated the answer to be able to stop the interval even if it is from a third party script. – Ludolfyn Apr 30 '20 at 11:16