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?

Improve this question
3
  • Does this answer your question? remove appended script javascript Commented Apr 29, 2020 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? Commented Apr 29, 2020 at 16:20
  • 1
    You can disable a stylesheet by setting disabled property. I'm not aware of actual unloading of either of these. There's an old answer of mine about scripts, but that's more experimental and hackish ... Commented Apr 29, 2020 at 16:38

1 Answer 1

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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
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.
quick variation on your answer. This would work on third party scripts as well, thought it's not as elegant. jsfiddle.net/6chLbq72
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?
Okay @ProgrammerForFun , I've updated the answer to be able to stop the interval even if it is from a third party script.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.