如何在Vuejs中实现一个节流方法？

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

您可以使用来自 lodash 的 debounce 来解决它。正在做：

_.debounce(callServiceMethod, delay_time, { 'leading': true })

debounce 函数会在您调用它时向您发送该函数的节流版本。为了从组件范围和 eventHandler 中的模板访问它，最简单的方法是这样的：

import debounce from 'lodash/debounce'

export default {
  ...,
  methods: {
    sendChatState: debounce(function() {
            do your thing here 
    }, delay_time, { 'leading': true }),
  },
  ...
}

请注意，您需要使用 config 参数来立即调用该方法。

更多信息here。

Answer 2

让我们在开始时将标志 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>