Question

目前，我有一个带有单击事件的离子按钮，该按钮调用一种方法。

<ion-button expand="full" color="primary" (click)="sendMsg()">Tap</ion-button>

sendMsg方法包含用于将对象推送到数组并在某些情况下打开模式的语句。

sendMsg = () =>{ // statements to push an objects to an array(this is an array displays on chat page); this.openModal(); }

async openModal() { const myModal = await this.modalController.create({ component: ModalPage, componentProps: { firstAction: this.firstAction, secondAction: this.secondAction, thirdAction: this.thirdAction }, cssClass: 'modal-css', backdropDismiss: false }); 这是一个聊天页面，单击TAP按钮可获取消息，而在两者之间点击可显示离子模态。这里的问题是，当我们点击超级快而点击事件之一中出现模态时，由于我们正在快速点击，所以我看到的消息显示是模态出现后应该显示的。

为避免这种情况，我想到添加debounceTime，它可能会有一些时间延迟，并考虑了最新的click事件，并且在正常的角度世界中都有效。

我遵循了https://coryrylan.com/blog/creating-a-custom-debounce-click-directive-in-angular，但是在离子模式下却无效。

任何想法都很感激。

Answer 1

将主题用作事件发出源并从那里控制点击率

const openModalAction=new Subject()
sendMsg = () =>{
// statements to push an objects to an array(this is an array displays on chat page);
openModalAction.next()
}

const openModal=defer(()=>from(this.modalController.create({
      component: ModalPage,
      componentProps: {
        firstAction: this.firstAction,
        secondAction: this.secondAction,
        thirdAction: this.thirdAction
      },
      cssClass: 'modal-css',
      backdropDismiss: false
    })))

const openModalAction.pipe(dounceTime(1000),switchMap(_=>openModal)

无法在离子按钮单击事件上使用debounceTime

1 个答案: