Question

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

我的行动中有这个

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

data param返回此

{
  playerAmount : 10,
  position     : 2
}

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

我的问题：

让我在视图中说我有类似Player Amount: 10的东西，然后套接字一次性发送数字1,3和5，所以新的数量将变为19，这是新数字的总和，这没关系，但这种改变不应该快速发生，在一个数字和另一个数字的总和之间，应该有5秒的差异，如：

Player Amount: 10

5秒后

......

Player Amount: 11

5秒后

......

Player Amount: 14

5秒后

......

Player Amount: 19

......等等。

所以我试图弄清楚哪种方法最适合在这里使用。使用setTimeout，它会执行我想要的但只进行第一次尝试，其余的总和大约需要1秒的差异，即使您将超时时间设置为5秒。

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

相同

我这样做了

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

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

告诉我你的建议。

以防您想查看我的代码

上面的代码在我的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

是的，您关于在数组中存储数据的想法是可行的。

我们可以将数组视为队列。

但是，您仅限于每5秒更新一次。

var queue = [];

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

setInterval(function() {
   if (queue.length > 0) {
     var data = queue.shift();
     PlayerSlotActions.updatePlayerAmount(data);
   }
}, 5000);

Answer 2

因此，您无法从此问题中输入我的代码：How to do a queue in order to wait 5 seconds to execute a function

我现在不知道你是否用Will Newton解决了这个问题，但如果你没有，请试试这个：

// 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;
        }
    }
}

一旦套接字发出事件（？），每5秒更新一次组件

2 个答案: