Avoiding an endless spiral on a setter in JavaScript/TypeScript

Implementing TypeScript, I've been working on setting up a concept called a "trigger" : an object that includes both a checker function (which returns a Boolean) and a behavior function capable of performing various tasks. My aim is to execute the checker function of the trigger every time a specific variable's value changes. If the checker returns true, then the behavior function should also run.

Naturally, I placed the call to the trigger's checker function in a setter :

set health(value: number) {
    this._health = value;
    runTriggers();
}

The objective of a trigger's behavior function is to perform actions, including modifying values of variables. However, a problem arises when a trigger is invoked in the health setter as shown above, and the behavior function of the trigger alters the health variable (leading to another invocation of the setter), causing an endless recursive loop.

How can I prevent this infinite recursion while still allowing the trigger's behavior function to freely modify variables?

Answer №1

Your solution will heavily rely on the design choices you make. In essence, it is crucial to have a mechanism in place that prevents an infinite loop from occurring. At some point, there must be a way to set the variable health without triggering additional functions.

To circumvent recursive trigger calls, consider implementing a simple flag:

set health(value: number) {
    this._health = value;
    if (!this._healthTriggerActive) {
        this._healthTriggerActive = true;
        try {
            runTriggers();
        } finally {
            this._healthTriggerActive = false;
        }
    }
}

Be mindful that using this method may mean that setting health within a trigger callback will not activate triggers (which is the main issue at hand).

Another approach could involve restricting recursion depth by utilizing a counter, thus allowing a certain level of recursion while preventing excessive looping; however, this might only serve as a temporary fix rather than addressing the root cause.

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

What steps can be taken to prompt the layout to transition?

I have an element that sticks to the top based on the current scroll offset. The issue is that the layout doesn't update when there is space available after the stuck element. This creates a ghost gap where the stuck element used to be... http://fidd ...

Changing a live request in React

Imagine you have a request that needs to be delayed, similar to how Google Docs waits a moment before sending the "save" request. In browser JavaScript, you could achieve this by implementing code like the following: // Overwrite this global window variabl ...

I am attempting to send an array as parameters in an httpservice request, but the parameters are being evaluated as an empty array

Trying to upload multiple images involves converting the image into a base64 encoded string and storing its metadata with an array. The reference to the image path is stored in the database, so the functionality is written in the backend for insertion. Ho ...

Linking to a Different Tab without Tab Mutation with Bootstrap 3.3.5

I am facing a similar issue to the mentioned questions. I am trying to use a link to change tabs, but the problem is that the link only changes the tab content and not the active tab. The most similar question can be found at: Bootstrap linking to a tab w ...

Is it possible to modify the sizes parameter of the GPUComputationRenderer?

Currently, I am utilizing gpuCompute = new GPUComputationRenderer( sizeX, sizeY, renderer ); for texture purposes. I am looking to update the values of sizeX and sizeY within this code snippet. However, after searching through the library, I have not been ...

Ways to retrieve the length of a list received from a controller using the onChange() method in JQuery

In my Controller class, I am returning a list of players. httpReq.setAttribute("playersList", playersList); Now, in the onchange() method, I need to find out the size of this list. $('#teams').on('change', function(){ // code to get ...

A guide to implementing daily function calls for a week utilizing the @nestjs/scheduler module

Is there a way to schedule a function to run every day for a period of 7 days using Nestjs (@nestjs/scheduler)? @Cron(new Date(Date.now() + (24*60*60*1000) * 7) function() { console.log("This should get called each day during the next 7 days") ...

Executing a Cron Job several times daily, each and every day

This is my current code snippet: const CronJob = require('cron').CronJob; new CronJob({ cursoronTime: '* * * * *', // every minute onTick: async function() { console.log(&ap ...

Choose a select few checkboxes and then disable the remaining checkboxes using Vue and Laravel

I'm currently working on a project using Laravel 10 and Vue3. In the form, users are allowed to select only 3 checkboxes. Once they have selected 3 checkboxes, all remaining checkboxes should be disabled. I attempted to implement this functionality a ...

Unable to locate webpack module

When I try to run the command npm run start, I encounter an error message: The webpack configuration is as follows: "name": "frokify", "version": "1.0.0", "description": "frokify project", ...

Objects of equal nature combine and sift through

I am looking to categorize objects based on their status ID and also retrieve data and CSR counts for each item. Each StatusName has multiple items: [ { "StatusId": 2, "StatusName": "ordered", " ...

Utilize AngularJS to retrieve and interact with the JSON data stored in a local file once it has

Please do not mark this as a duplicate since I have not found a solution yet. Any help would be appreciated. I have a file called category.json located next to my index.html file, containing the following JSON data: [{"name":"veg"},{"name","non-veg"}] W ...

Updating Content Dynamically with AJAX, JavaScript, and PHP without requiring a page reload or user action

Currently, I'm delving into the world of JS/AJAX functions that operate without the need for a page refresh or button click. However, I've encountered an issue when trying to echo the value. Oddly enough, when I change this line $email = $_POST ...

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

Utilizing *ngfor in Angular 7 to Group and Display Data

I currently have incoming data structured like this in my Angular application Visit this link to see the data format https://i.stack.imgur.com/jgEIw.png What is the best way to group and sort the data by State and County, and present it in a table as sh ...

In order to develop a JS class in React JS, I must import Scripts

I have a collection of SDK scripts that need to be included in the following manner: <script src="../libs/async.min.js"></script> <script src="../libs/es6-shim.js"></script> <script src="../libs/websdk.client.bundle.min.js ...

Having Trouble Showing Loading Component on Next.js v13

Having some issues with setting up a loading component in my Next.js v13 project. I followed the documentation by creating a file called loading.tsx in the src directory, but it's not appearing on the page as expected. I've also included a functi ...

Issue: subscribe function is not definedDescription: There seems to be an

I'm currently trying to retrieve a value from an array based on a specific element, and then finding the exact matching element. Unfortunately, I've encountered an error with this.getProduct(name1: string) function even though I have already impo ...

Uncovering the enum object value by passing a key in typescript/javascript

How can I retrieve the value of an enum object by passing the key in typescript? The switch case method works, but what if the enum object is too long? Is there a better way to achieve this? export enum AllGroup = { 'GROUP_AUS': 'A' &a ...

Ever since updating my Node JS, the functionality of the MaterializeCSS carousel methods has ceased to work

Recently, I encountered some issues with my React project that features a materialize-css carousel. The problem arose after updating my nodeJS version from 14.8.1 to 16.13.0. Specifically, these errors kept popping up: TypeError: Cannot read properties o ...