How to avoid the creation of a new promise for each click?-CodePudding

I have a click that calls the method:

public clickEvent() {
    this.createIframe().then((iframe) => { // Return iframe or create if is not before needed inside 
      // Async hard logic here
    })
}

Problem is when user clicks a lot of times clickEvent() it fires promise and then fires a hard logic inside.

How to avoid click until logic inside is not finished? Or disable to call logic inside if it is done?

CodePudding user response：

Good practice for these scenarios, that's also good on the UX level, is to deactivate (in a visible way) the button once clicked, and reactivate only when the operation is complete. The iFrame can communicate to its parent, to indicate the operation is complete.

This way users see that they've clicked it, and that something is happening. Might add a spinner as well if you want to improve UX even more.

CodePudding user response：

If you're using Angular, I think you can convert the click event into an observable and then use the variety of operators such as exhaustMap to achieve this.

import { exhaustMap, fromEvent } from 'rxjs';
....
  @ViewChild('btnId') btnElementRef!: ElementRef<HTMLButtonElement>;

  ngAfterViewInit(): void {
    fromEvent(this.btnElementRef.nativeElement, 'click')
      .pipe(
        exhaustMap(() => this.createIframe())
      )
      .subscribe((iframe) => {
        // hard coded async logic here
      });
  }
);

This will ignore sub-sequent click until the Promise resolve first.

Further more, if you want to disable the button and display somekind of loading indicator, you can also add a variable to track that inside the stream using tap

  fromEvent(this.btnElementRef.nativeElement, 'click')
      .pipe(
        tap(() => isProcessing = true),
        exhaustMap(() => this.createIframe())
      )
      .subscribe((iframe) => {
        isProcessing = false;
        // hard coded async logic here
      });

CodePudding user response：

Make createIframe cache its Promise (like as an instance property), and return that first if it exists, instead of starting another. For example:

// example function that creates the Promise
const createPromise = () => {
  console.log('creating Promise');
  return new Promise(resolve => setTimeout(resolve, 3000));
}

class SomeClass {
  createIframe() {
    if (this.iframePromise) return this.iframePromise;
    this.iframePromise = createPromise();
    return this.iframePromise;
  }
  clickEvent() {
    this.createIframe().then((iframe) => {
      console.log('clickEvent has received the Promise and is now running more code');
    })
  }
}

const s = new SomeClass();
button.onclick = () => s.clickEvent();

<button id="button">click to call clickEvent</button>

If you also want to prevent // Async hard logic here from running multiple times after multiple clicks, assign something to the instance inside clickEvent instead.

// example function that creates the Promise
const createPromise = () => {
  console.log('creating Promise');
  return new Promise(resolve => setTimeout(resolve, 3000));
}

class SomeClass {
  createIframe() {
    return createPromise();
  }
  clickEvent() {
    if (this.hasClicked) return;
    this.hasClicked = true;
    this.createIframe().then((iframe) => {
      console.log('clickEvent has received the Promise and is now running more code');
    })
  }
}

const s = new SomeClass();
button.onclick = () => s.clickEvent();

<button id="button">click to call clickEvent</button>