javascript - socket.io 在点击后显示多个用户数据

Question

我这里有这段代码:

服务器:

   io.emit('attack-damage', {
   damage: damage,
   attacker: username,
   });

客户:

socket.on('attack-damage', (data) => {
     setTimeout(() => this.damageVisible = false, 1000);
});

它的作用是当用户点击 attack 时，它会发出并显示用户受到的伤害，该伤害会在一秒后消失。问题是，如果我点击攻击，我的伤害就会显示出来，但如果另一个玩家点击攻击，那么它的伤害就会显示出来，而我的伤害消失得比 1 秒后更快，它只是取代了另一个玩家的新伤害。如何在屏幕上显示多个损坏而不是一个？

编辑

        socket.on('attack-damage', (data) => {
            this.damage = data.damage;
            this.aryDamage.push(data.damage, data.attacker);
                if (!this.bolDamageRunning) {
                    if(this.aryDamage.length != 0) {
                        this.bolDamageRunning = true;
                        setTimeout(() => {
                              this.damageVisible = false;

                              this.aryDamage.splice(0,1);
                              this.bolDamageRunning = false;
                        }, 2000);

                    } else {

                    }
                } else {

                }

            setTimeout(() => this.damageVisible = true, 2000);

当我使用上面的代码时，它会在点击后两秒后出现损坏。但是如果我使用两个用户，那么屏幕的旧损坏会被新的替换

Answer 1

1. 创建一个名为 aryDamage 的全局数组。

2. 创建一个名为 bolDamageRunning 的全局 bool 值。

3. client socket.on('attack-damage'), 添加一个新元素到数组中，例如

aryDamage.push(data);

1. 使用 setInterval 创建一个计时器，每 100 毫秒读取一次 aryDamage。

function thisTimerCalledEvery100MS() {
  // run Damage only when last Damage finish
  if (!bolDamageRunning) {
    // Check whether another damage waiting
    if (aryDamage.length != 0) {
      // Set running true
      bolDamageRunning = true;

      // call funDamage after 1 second
      setTimeout(funDamage, 1000);
    } else {
      // No command waiting, do nothing
    }
  } else {
    // Another command running, do nothing
  }
}

function funDamage() {
  // Your code to show damange, or
  // do something with the first element of aryDamage
  this.damageVisible = false;


  // remove top element from aryDamage
  aryDamage.splice(0,1);


  // Set running = false
  bolDamageRunning = false;
}

此技术可确保在执行下一个“命令”之前完成最后一个“命令”。