Remove recently added features using AJAX

Here is a scenario where I have an original set of functions :

<script>
function f(x){..}
function z(x){..}
...
</script>

Additional functions are then dynamically loaded via AJAX :

<script>
function xyz(){..}
windows.abc(){..}
...
</script>

The challenge now is how to remove ALL functions that are attached to the "this" and "windows" scope, except for the original ones (in this case f(x), z(x)). Since new functions will be added dynamically in the future, the solution needs to be flexible. One approach could involve storing the names of the original functions and making sure they are not deleted during a loop that targets all other functions.

Answer №1

It’s always important to be mindful of the global scope and not clutter it with unnecessary values.

One approach is to create an array to keep track of your current global functions:

// Storing existing functions in an object
// Example: { myFunc: 1, anotherFunc: 1 }
var funcsList = {};
Object.keys(globalThis).filter(function (key) {
   if(typeof globalThis[key] === "function") {
      funcsList[key] = 1;
   }
});

// Fetch new data
$.get("example.com/api", function(response) {
   // Remove functions that were not present before
   Object.keys(globalThis).forEach(function (key) {
      if(typeof globalThis[key] === "function" && !funcsList[key]) {
         delete globalThis[key];
      }
   });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to resolve the issue with the information window on Google Maps

I have a problem with displaying infowindows in Google Maps; currently, it only shows the information for the last marker added. let myLatlng = new window.google.maps.LatLng(-33.890542, 151.274856 ); let mapOptions = { zoom: 13, cent ...

Trigger an event in Vue.js 3 Composition API when a Component becomes visible

In my application, I have components that are toggled between visibility using buttons and variables like v-show="variable." These components function as separate web pages within the app, similar to browsing different pages on a website. What I& ...

To enhance user experience, it is recommended to reload the page once

Hello, I'm looking for a way to automatically refresh the page after submitting an AJAX form. Currently, I have an onClick function that seems to refresh the page, but I still need to press F5 to see the changes I've made. Here's the JavaSc ...

Error encountered: "Jest error - TypeError: Unable to access property 'preventDefault' because it is undefined."

I encountered an issue while testing the function below, resulting in the error mentioned above. function toggleRecovery = e => { e.preventDefault() this.setState( { recovery: !this.state.recovery }, () => { ...

The function crypto.signText() does not prompt the user for a certificate

My goal is to digitally sign a form on the client side and then send it to the server for verification. I have incorporated the crypto.signText() function into my code, but I am encountering an issue where the form does not prompt me to select a certifica ...

Can the concept of partial class be used in an AngularJS controller?

Is it possible to organize code into groups using partials in angularjs? The issue is that my controller has become too cluttered with a lot of code for different methods and functionalities, making it difficult to read. I want to maintain the same contro ...

Preventing the Overwriting of Parent Data by Updated Child Data in VueJS [2.6.14]

Currently utilizing vuejs 2.6.14 and encountering the following problem: Changes made in child component are reflecting in parent component without using $emit in the code. This is contrary to the typical scenario of updating data between parent and chil ...

Acquire a set of picture cards for displaying in a grid layout

After creating a cardArray to store card objects, I went through each item in the array to generate images as cards. These card images were then appended to the grid div as children. Additionally, I set up an event listener for the shuffle button. However, ...

Guide to configuring a robust schema and validation with joi

Currently in the process of setting up validation using the joi package, encountering syntax-related issues along the way. The schema in place is simple, checking for a valid number and verifying if the ID exists in the database. export default router.pos ...

Why does TypeScript permit the storage of incorrect types?

Utilizing Typescript within NodeJS has presented a challenge for me. I defined an interface and assigned it to a variable. However, when I attempt to pass data that does not align with the type specified in the interface - such as passing a number instead ...

Detection of collisions using bounding sphere method

In Three.js, each mesh (THREE.Object3D) comes with useful properties like boundingSphere and boundingBox, along with methods such as intersectsSphere and isIntersectionBox. I initially thought I could use these for simple collision detection. However, I n ...

Navigate forward to the next available input in a grid by using the tab key

My goal is to improve form entry efficiency by using the tab key to focus on the next empty input field within a grid component. If an input field already has a value, it will be skipped. For example, if the cursor is in input field 2 and field 3 is filled ...

How to convert table headings in Bootstrap-Vue.js

For a few nights now, I've been struggling to translate the table header in my vue.js component. It seems like I'm missing something as I'm new to Vue.js and can't seem to figure out what's wrong. Translating within the HTML works ...

What is the best way to calculate the average of values from multiple objects sharing the same key in an array using JavaScript?

Consider an array with student profiles: let profile = [ {student: "A", english: 80, maths: 80}, {student: "A", english: 70, maths: 60}, {student: "B", english: 50, maths: 50}, {student: "B", english: "--", ...

Discovering the differences between input values in HTML when using scripts

I have a code snippet here for an HTML project. The code includes an input field for username and password. I am looking to compare the user's input with a specific value using JavaScript. My question is, what code should be included in the button cli ...

The internal browser scrollbar in IE 11 is proving to be impossible to remove, even with the use of simplebar

After facing severe performance problems when using perfect-scrollbar and ngx-perfect-scrollbar with Angular 2 in IE11, I had to make the difficult decision to move away from them. With a large project underway and numerous components being initialized sim ...

JavaScript is failing to pass the argument value

Whenever I attempt to pass a value on an onclick=function('') function, the value does not seem to get passed correctly while ($row = mysqli_fetch_array($result)) { $id = $row['id']; echo '<a href="#" onclick="DeleteUse ...

Is there a way to hide the left/right button once the scroll reaches the end of the container?

I've implemented a tab item list enclosed in a <ul> container with specified max-width and overflow-x properties causing the tab items to overflow. Below is the foundational code for the <ul> wrapper containing the mapped tab item list: ...

Create a custom CSS style to replace the default jQuery hide() function

HTML <div class="adm-input" <?php if(!empty($admin_fee) || $admin_fee != "") echo "style='display:block'"; ?> id="fees-input"> <label>Admission Fees(<i class="fa fa-inr"></i>)</label> <div class="in ...

Send Components to another component without specific TypeScript typespecified

Struggling with a situation where I am faced with the challenge of working around strongly typed variables. The issue arises with a set of icons as components and an icon wrapper component. The wrapper component requires a themeMode variable to determine ...