Skip to main content

GdDebounce

The @GdDebounce decorator is a helpful tool for Angular applications that prevents a method from being called too frequently. It's especially useful for functions that are triggered by user actions like typing or scrolling.

What it does​

When you add @GdDebounce to a method, it makes sure the method doesn't run right away every time it's called. Instead, it waits for a short pause in the calls before actually running the method. This can help improve your app's performance and reduce unnecessary work.

How to use it​

Using the @GdDebounce decorator is simple. Here's how you can add it to your Angular component:

  1. First, import the decorator:
import { GdDebounce } from '@geodome/gdk/common';
  1. Then, add it to the method you want to debounce:
export class MyComponent {
  @GdDebounce(300)
  onUserInput() {
    // Your method logic here
  }
}

In this example, 300 is the number of milliseconds to wait before calling the method. You can change this number to suit your needs.

Customizing the wait time​

By default, @GdDebounce waits for 300 milliseconds. You can easily change this:

  • For a shorter wait: @GdDebounce(100)
  • For a longer wait: @GdDebounce(500)

Choose a wait time that makes sense for your specific use case.

When to use it​

@GdDebounce is great for:

  • Search inputs where you want to wait for the user to stop typing before making an API call
  • Scroll events where you don't need to respond to every single scroll update
  • Any situation where a function might be called rapidly, but you only need the final result

By using @GdDebounce, you can make your Angular app more efficient and responsive!