1

I have a website that has a lot of popups, whenever a user load a popup (via ajax) there is a JavaScript code also loaded in the popup, I want this JavaScript code to be removed when its popup removed.

Main site code:

<body>

...

<div id="popup" style="display:none">

</div>
...

</body>

and then a loader in js file:

$.ajax('url',{
    success:function(data){
        $("#popup").show().html(data);
    };
});

one of the views that ajax call and push it in the popup:

 some html codes
<script>
$(document).on('click',function(){
console.log("document click");
});
</script>

when the user closes the popup, I use this code to empty the popup:

$("#popup").hide().html("");

but this doesn't end the on click event that was loaded, and any functions in the view will still exist in the memory and can be called!

this is an issue because I have a lot of popups here, and JavaScript eats the memory after a while, so I need to refresh the browser after using the website for some time, plus, events are duplicated whenever the popup reloaded!

If it not possible to clear these JS from the memory, are there any workaround for it?

Improve this question
6
  • $(document).off('click'); ?? - (api.jquery.com/off), for the script which is loaded via ajax give it an id and use .remove() on the script element, but you'll still need to remove event handlers Commented Feb 11, 2020 at 20:16
  • Does this answer your question? Best way to remove an event handler in jQuery? along with this for removing a script (stackoverflow.com/questions/30072887/…) Commented Feb 11, 2020 at 20:18
  • @RyanWilson Thanks for the references, but no it doesn't answer the question. You see, the problem is not with events alone, it is with everything that comes along with the ajax request, I don't want functions to stay after the popup closed nor the events Commented Feb 11, 2020 at 22:41
  • AS I said, in the second link I gave you, give the script an id and remove it as well, thus the functions Commented Feb 12, 2020 at 13:26
  • 1
    I apparently misunderstood what you were trying to accomplish, the short answer is, there is no way to remove functions loaded by a dynamic script from memory without refreshing the page or causing a post back, but you can for lack of a better word "destroy" everything that was in your dynamic script by setting things to undefined and so forth, this would have to be done via a cleanup or unload function you called when removing the partial view, perhaps the accepted answer on this post (stackoverflow.com/questions/34997399/…) will get you going. Commented Feb 12, 2020 at 18:53

1 Answer 1

Reset to default
2

What I get from your question (if I understood it correctly) is you need a way to clean up your memory from unused functions (maybe variables too) with some events listeners, Here is my approach:

#1 - Use removeEventListener

removeEventListener is a method used to remove unwanted events listeners from event target for example:

// add click event to the body
document.body.addEventListener('click', function clickHandler(){
   console.log("document click");
});

// remove click event from the body
document.body.removeEventListener("click", clickHandler)

#2 - Garbage Collection

JavaScript does not provide a direct way to clean up the memory from unnecessary data (function declaration or variables declaration) but we can trick it using Garbage Collection. Garbage Collection uses an algorithm for cleaning up the memory from unnecessary data called Mark and Sweep. Basically this algorithm clean up the memory through marking of all the nodes (Objects) that are not reachable though the root node (which is the global object in JavaScript) and remove them from the memory. We can use this to our advantage by using two things (IIEF and Block-Scoping).

IIFE

IIFE is an acronym for Immediately Invoked Function Expression. If you go more deep about IIFE you will find that the function created inside (...) are hiding in a different scope other than the global scope, which means that by creating a function as an IIFE we will prevent the global Object from accessing it which means it will get removed from memory by the Garbage Collector after it gets executed.

Take a look at this example:

(function foo() {
   // your code goes here
})()

console.log(foo) // ReferenceError: foo is not defined

Block-Scoping

Introduction to Scope

A block statement is used to group zero or more statements. The block is delimited by a pair of braces {...} and may optionally be labelled.

If you declared your variables inside it using the let or const keywords, Your variables will be not reachable by the global object and then can be removed from memory by the Garbage Collector after it gets executed.

Take a look at this example:

function foo(data) {
   // do something with the data
}

{
   let someBigData = []
   foo(someBigData)
}

console.log(someBigData) // ReferenceError: someBigData is not defined
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.