JavaScript传递参数错误，点击事件传递传递中的所有参数

Question

我正在用 js 和 pixi.js 制作游戏，我在为函数传递参数时遇到了问题。下面的代码

newGame()
{
  // Some code before, then I get the audio which I want to play
  let audio = this.soundsArray[this.shuffleQuestionsInLevel[this.rightAnswer].sound];
    
  // Auto play audio at the begining of game
  this.playSound(audio);
  // Click to repeat the sound
  this.soundBtn.on('pointerdown', this.playSound.bind(this, audio));
}

// Play audio after 5 seconds
playSound(audio)
{  
  setTimeout(() => audio.play(), 5000);
}

在第一场比赛中，一切都很完美，播放的声音完全一样。但是，从第二局开始，点击事件this.soundBtn.on('pointerdown', this.playSound.bind(this, audio));播放了pass中所有的声音，也就是说第二局播放了2个音效，第三局游戏播放了3个音效。 =14=]

开头自动播放音频的代码this.playSound(audio)每次都运行良好。只播放此游戏中的声音。

我不知道为什么我调用相同的函数并传递相同的参数，但只有自动播放音频的代码有效。我希望点击事件完全像那样工作。有人知道有什么问题吗？谢谢。

Answer 1

看起来你在开始游戏时附加了事件处理程序（当你调用 newGame() 时，但你永远不会分离它：

// This line attaches the handler, but it attaches a new handler everytime!
this.soundBtn.on('pointerdown', this.playSound.bind(this, audio));

// To understand why, let's write it more explicitly
//
// First a new "listener" function is created from this.playSound by calling bind
const listener = this.playSound.bind(this, audio);

// Then this function is attached as an event handler
this.soundBtn.on('pointerdown', listener);

// But since listener is not the same function as this.playSound anymore
// (because .bind produces a new function) the following line will not work
// and listener will stay attached
this.soundBtn.off('pointerdown', this.playSound);

为了解决这个问题，您很可能需要将 listener 函数存储在某个地方，以便您以后可以将其分离：

newGame() {
  // ...
  this.__playAudio = this.playAudio.bind(this, audio);
  this.soundBtn.on('pointerdown', this.__playAudio);
}

// And then when the game is over
this.soundBtn.off('pointerdown', this.__playAudio);

或者，如果 soundBtn 支持它，则在游戏结束时分离所有 pointerdown 处理程序：

this.soundBtn.off('pointerdown');

JavaScript传递参数错误，点击事件传递传递中的所有参数

JavaScript pass parameters error, the click event pass all parameters in the pass

javascript

parameters

events

arguments

pixi.js