javascript - 一旦套接字发出事件(？)，每 5 秒更新一次组件

Question

我正在使用 React 和 socket.io，每次事件发生时，都会有一个套接字监听任何更改。

我的行动就是这样

socket.on('playerCount', (data) => {
  PlayerSlotActions.updatePlayerAmount({
    playerAmount : data.cardCount,
    position     : data.position,
  });
})

其中 data 参数返回此

{
  playerAmount : 10,
  position     : 2
}

有时来自套接字，一次来自 4 到 7 个事件，以便将 playerAmount 键更改为另一个值。每次收到该事件时，我都应该将 playerAmount 的数字更改为从套接字发送的新数字。

我的问题:

假设在 View 中我有类似 Player Amount: 10 的内容，然后套接字一次发送数字 1、3 和 5，因此新的金额将更改为 19，即新数字的总和，这是可以的，但是这种变化不应该很快发生，一个数字的总和与另一个数字的总和之间应该有 5 秒的差异，例如:

玩家数量:10

5秒后...

玩家数量:11

5秒后...

玩家数量:14

5秒后...

玩家数量:19

...等等。

所以我试图找出这里使用的最佳方法。使用setTimeout，它可以实现我想要的功能，但只是第一次尝试，即使您设置超时 5 秒，其余的总和也需要大约 1 秒的差异。

我正在使用 lodash，所以我想 _.debounce、_.throttle 或 _.delay 方法可能会有所帮助，但我错了。仅延迟的工作方式与 setTimeout

相同

我是这样做的

socket.on('playerCount', (data) => {
  setTimeout(function() {
   PlayerSlotActions.updatePlayerAmount({
     playerAmount : data.cardCount,
     position     : data.position,
   });
 }, 5000);
});

我刚刚学习这个。有没有办法将新数字存储在数组或类似的东西中？

告诉我你的建议。

<小时/>

以防万一您想查看我的代码

上面的代码在我的actions中，从actions，它转到stores

  @bind(PlayerSlotActions.updatePlayerAmount)
  updatePlayerAmount (data) {
    this.state.playerSlots[data.position - 1].playerAmount = data.playerAmount;
  }

从那里，它直接进入组件

  componentDidUpdate () {
    let playerAmount = this.props.playerAmount;
    this.refs.playerAmount.getDOMNode().innerHTML = playerAmount;
  }

<小时/>

更新

  connect () {

    socket = io.connect('localhost:1101/server');

    socket.on('playerCount', (data) => {
      console.log('1');
      queue.push({
        playerAmount : data.cardCount,
        position     : data.position,
      });
    })

    setTimeout(function() {
      if (queue.length > 0) {
        var data = queue.splice(0, 1)
        PlayerSlotActions.updatePlayerAmount(data);
      }
    }, 5000);
  }

Answer 1

所以你在输入这个问题的代码时遇到了问题:How to do a queue in order to wait 5 seconds to execute a function

我不知道你现在是否和威尔·牛顿一起解决了这个问题，但如果你没有解决，请尝试这个:

// variables for the queue and a boolean to
// indicate whether the queue gets worked on or not
var queue = [];
var notRunning = true;

connect () {
    socket = io.connect('localhost:1101/server');

    socket.on('playerCount', (data) => {
      console.log('1');
      queue.push({
        playerAmount : data.cardCount,
        position     : data.position,
      });
      startQueue();
    })

    // Initiating function, has to be seperate because else each socket connect
    // would trigger a new instance of processQueue, which would result
    // in shorter times than 5s between the updates
    function startQueue(){
        if(notRunning){
            notRunning = false;
            processQueue();
        }
    }

    // Recursive function, calls itself every 5 seconds as long as there are
    // items in the queue
    function processQueue(){
        if(queue.length > 0){
            setTimeOut(function(){
                // passes the first item of the queue in your function
                PlayerSlotActions.updatePlayerAmount(queue[0]);
                // removes first item from the queue
                queue.shift();
                processQueue();
            }, 5000)
        }else{
            notRunning = true;
        }
    }
}