Choosing numerous values ought to activate the service only once at a set time interval

Question

Choosing numerous values ought to activate the service only once at a set time interval

I have a dropdown box with a select event (selectionChange) implemented as shown below:

<mat-select #segmentSelector [formControlName]="filter.VAL" multiple placeholder="Select" (selectionChange)="someMethod($event.value, filter.VAL)">
     <div class="custom-panel">
         <ng-container *ngFor="let option of getFilterDropdownOptions(filter.VAL)">
             <mat-option *ngIf="!!option"  [value]="option" [value]="option">
                 {{ option }}
             </mat-option>
         </ng-container>
     </div>
     <footer class="select-box-footer">
         <a class="select-box-footer-btn" (click)="$event.preventDefault();segmentSelector.close();">Done</a>
     </footer>
 </mat-select>

The selectionChange event works correctly when the value in the dropdown is changed:

someMethod(val: any, columnName: any) {
console.log(val);

    var obj = val as [];

    if (columnName === "CUST_ID") {
      this.aLogData.customerId = [];

      for (var i = 0; i < obj.length; i++) {
        console.log(obj[i]);

        this.aLogData.customerId.push(obj[i]);
      }
    }

    if (columnName === "CUST_NAME") {
      this.aLogData.customerName = [];

      for (var i = 0; i < obj.length; i++) {
        console.log(obj[i]);

        this.aLogData.customerName.push(obj[i]);
      }
    }

    var searchLocationInput = ((document.getElementById("searchLocationInput") as HTMLInputElement).value);
    console.log(this.aLogData);
    console.log(searchLocationInput);

    this.aLogData.searchItem = searchLocationInput;
    this.statusTwo = true;

    setTimeout(() => this.delaySomeMthod(this.aLogData), 10000); //Attempting to delay sending data once
  }

  delaySomeMthod(aLogData: LogData) {
    console.log("Called after 10 secs.");
    this.locationService.setLogData(aLogData).subscribe();
  }

However, I am facing an issue where the controller is called every time the dropdown data changes. I tried adding a timer but it seems like I need to control sending requests to the controller at specific intervals.

My requirement is to allow selecting and changing values in the dropdown multiple times, but only calling the service or controller once after a certain period, for example, 10 seconds, as I am updating an array. Is this achievable?

angular typescript angular15

Answer 1

Answer №1

Alright, let's delve into a potential solution:

Begin by adding new variables at the class level:

intervalCallsService: (interval) initialized as null;
newSelectedData: Set, array, or object (depending on the type of value selected in dropdowns);

Implement the callServiceAndHandleData method:

Start by calling the service with newSelectedData as a parameter,
Then clear the newSelectedData (or set it to null),
Finally, set intervalCallsService to null;

Update the Dropdown changed method:

Add the received value to newSelectedData [refer to the note below: crucial];
Check if intervalCallsService is null: if so, initiate it (set it to an interval of 10 seconds that will call the callServiceAndHandleData method;

Here's how the scenario unfolds:

Upon changing the dropdown value, the new value is appended to newSelectedData (currently the first and only element) and since it's the initial change, it triggers intervalCallsService (initiates an interval).
The interval commences counting.
If the dropdown is altered again, newSelectedData gains another element, but as intervalCallsService is not null, it won't be restarted.
When the interval reaches its end, it executes the callServiceAndHandleData method, sending newSelectedData through the service, resetting intervalCallsService, and clearing newSelectedData.
Thus, when the user switches the dropdown value once more, return to step 1.

Crucial: Only add a new value to newSelectedData if it isn't already present: for primitive values, a Set would be preferable over an array, while for non-primitive ones, an object may be the better choice. If your setup isn't entirely dynamic, consider using object keys corresponding to each dropdown to ensure each value is added just once as a value for the appropriate key.

Answer 2

Alright, let's delve into a potential solution:

Begin by adding new variables at the class level:

intervalCallsService: (interval) initialized as null;
newSelectedData: Set, array, or object (depending on the type of value selected in dropdowns);

Implement the callServiceAndHandleData method:

Start by calling the service with newSelectedData as a parameter,
Then clear the newSelectedData (or set it to null),
Finally, set intervalCallsService to null;

Update the Dropdown changed method:

Add the received value to newSelectedData [refer to the note below: crucial];
Check if intervalCallsService is null: if so, initiate it (set it to an interval of 10 seconds that will call the callServiceAndHandleData method;

Here's how the scenario unfolds:

Upon changing the dropdown value, the new value is appended to newSelectedData (currently the first and only element) and since it's the initial change, it triggers intervalCallsService (initiates an interval).
The interval commences counting.
If the dropdown is altered again, newSelectedData gains another element, but as intervalCallsService is not null, it won't be restarted.
When the interval reaches its end, it executes the callServiceAndHandleData method, sending newSelectedData through the service, resetting intervalCallsService, and clearing newSelectedData.
Thus, when the user switches the dropdown value once more, return to step 1.

Crucial: Only add a new value to newSelectedData if it isn't already present: for primitive values, a Set would be preferable over an array, while for non-primitive ones, an object may be the better choice. If your setup isn't entirely dynamic, consider using object keys corresponding to each dropdown to ensure each value is added just once as a value for the appropriate key.

Answer 3

Answer №2

If you want to add a delay before firing a method, consider creating a decorator that can handle this for you. By using a decorator, the method will wait until the specified time has passed before executing. It's a good practice to keep the decorator in a separate TypeScript file so you can easily reuse it across your application.

export function ngDebounce(timeout: number) {
  // Store timeout value to cancel the timeout
  let timeoutRef = null;

  return function(target, propertyKey: string, descriptor: PropertyDescriptor) {
    // Store original function for future use
    const original = descriptor.value;
    // Override original function
    descriptor.value = function(...args) {
      // Clear previous timeout
      clearTimeout(timeoutRef);
      // Schedule timer
      timeoutRef = setTimeout(() => {
        // Call original function
        original.apply(this, args);
      }, timeout);
    }
    // Return descriptor with new value
    return descriptor;
  }
}

Learn more about implementing debounce decorator

Usage:

@ngDebounce(10000)
delaySomeMthod(aLogData: LogData) {
  console.log("Called after 10 secs.");
  this.locationService.setLogData(aLogData).subscribe();
}

Answer 4

If you want to add a delay before firing a method, consider creating a decorator that can handle this for you. By using a decorator, the method will wait until the specified time has passed before executing. It's a good practice to keep the decorator in a separate TypeScript file so you can easily reuse it across your application.

export function ngDebounce(timeout: number) {
  // Store timeout value to cancel the timeout
  let timeoutRef = null;

  return function(target, propertyKey: string, descriptor: PropertyDescriptor) {
    // Store original function for future use
    const original = descriptor.value;
    // Override original function
    descriptor.value = function(...args) {
      // Clear previous timeout
      clearTimeout(timeoutRef);
      // Schedule timer
      timeoutRef = setTimeout(() => {
        // Call original function
        original.apply(this, args);
      }, timeout);
    }
    // Return descriptor with new value
    return descriptor;
  }
}

Learn more about implementing debounce decorator

Usage:

@ngDebounce(10000)
delaySomeMthod(aLogData: LogData) {
  console.log("Called after 10 secs.");
  this.locationService.setLogData(aLogData).subscribe();
}

Choosing numerous values ought to activate the service only once at a set time interval

Answer №1

Answer №2

Learn more about implementing debounce decorator

Usage:

Similar questions

Cross-site request forgery (CSRF) vulnerability spanning multiple applications

Create an entity with a field that holds a value type based on the value of another key field

Tips for integrating Ava with an Angular/CLI setup for your TypeScript project

Collaborate and reuse Typescript code across various Node projects

Leveraging WebStorm's TypeScript support in conjunction with node_modules

Determining the size of a custom-typed array in Typescript

What is the best way to ensure synchronous function execution in Angular?

Looking for guidance on how to deploy a Node server with TypeScript on Vercel

Troubleshooting the creation of migration paths in NestJS with TypeORM

Initiate a button press upon pressing the space bar

What is the best way to include an Observable in this function?

Typescript hack: Transforming read-only arrays into tuple types with string literals

I am facing an issue in Angular2 where my component is unable to bind to the model and show the data in the HTML

React-aria | Encountering a typescript error with input fields/textfields

Tips for enhancing a TypeScript interface for a React component in (Material-UI) by utilizing styled-components

Active Angular component utilizing *ngIf during the programmatically lazy loading of a Module

Using an Angular HttpClient to authenticate with an API by utilizing a token for

Creating a TypeScript generic type for the "pick" function to define the types of values in the resulting object

Tips for creating an interface that dynamically expands according to a component's properties

Best practices for implementing "Event Sourcing" in the NestJS CQRS recipe