javascript - 如何在Vuejs中实现throttle方法？

Question

目前我正在使用 webSockets 的聊天应用程序中工作。我已经实现了一个指示器，显示其中一位聊天成员当前正在打字。我还有另一个调用，该调用会在用户开始输入内容 5 秒后触发以删除指示器。我遇到的问题是，如果用户继续输入超过 5 秒，那么“正在输入”指示器会在 UI 中快速闪烁...这是我当前的实现。

sendChatState({ commit, dispatch, state }, payload) {
    connectionService.connection.setDialogChatState({dialogId: payload.visitId, conversationId: payload.visitId, chatState: 'composing'})
    // Create set timeout here to pause typing indicator...
    setTimeout(() => {
    connectionService.connection.setDialogChatState({dialogId: payload.visitId, conversationId: payload.visitId, chatState: 'pause'})
    }, 5000)
  },

看来我可能需要使用某种类型的限制来限制调用量。然而，这就是我遇到麻烦的地方，因为我不完全确定如何实现这一点。

Answer 1

让我们在开始时将typing 标志设置为FALSE。每次更改输入值(意味着有打字)时，您都会启动一个计时器(如果有事件的计时器，则首先取消前一个计时器)，并且如果标记 typing 为 FALSE - 将其设置为TRUE 并显示指示器(否则它已经显示)。一旦定时器触发 - 您隐藏指示器并将标记 typing 设置为 FALSE。

<template>
  <textarea v-model="message" @input="setFlag"/>
</template>

<script>
...
data()
{
  return {
    message: '',
    typing: false,
    timer: null,
  }
},
beforeDestroy()
{
  if (this.timer) clearTimeout(this.timer);
},
methods:
{
  setFlag()
  {
    if (this.timer) clearTimeout(this.timer);
    this.timer = setTimeout(this.timeOut, 5000);
    if (!this.typing)
    {
      this.typing = true;
      connectionService.connection.setDialogChatState({dialogId: payload.visitId, conversationId: payload.visitId, chatState: 'composing'});
    }
  },
  timeOut()
  {
    this.typing = false;
    connectionService.connection.setDialogChatState({dialogId: payload.visitId, conversationId: payload.visitId, chatState: 'pause'});
    this.timer = null;
  }
}
</script>