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

创建一个名为aryDamage的全局数组。
创建一个名为bolDamageRunning的全局布尔值。
client socket.on（'attack-damage'），向数组添加新元素，例如

aryDamage.push(data);

使用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;
}

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

单击后socket.io显示多个用户数据

1 个答案: