How to prevent double clicks with ember.js?

@daisha 

One way to prevent double clicks in Ember.js is to implement logic in the click event handler that disables the button after it has been clicked once. This can be done by setting a flag in the component or controller, and checking this flag in the click event handler to determine whether to allow the click to proceed.

Here is an example implementation in an Ember component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// app/components/my-button.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MyButtonComponent extends Component {
  isClicked = false;

  @action
  handleClick() {
    if (!this.isClicked) {
      // Your click logic here
      console.log('Button clicked');

      // Set flag to prevent further clicks
      this.isClicked = true;

      // Reset flag after a certain delay
      setTimeout(() => {
        this.isClicked = false;
      }, 1000); // Replace 1000 with appropriate delay in milliseconds
    }
  }
}

In this example, the handleClick action method checks if the isClicked flag is false before executing the click logic. After the button is clicked, the flag is set to true to prevent further clicks. Additionally, a setTimeout function is used to reset the flag after a certain delay to allow the button to be clicked again.

You can then use this component in your template as follows:

1
2

<!-- app/templates/components/my-button.hbs -->
<button {{on "click" this.handleClick}}>Click me</button>

By implementing this logic in your Ember component, you can prevent double clicks and ensure that the button is only clickable once within a specified time frame.