Phaser - Show graphic objects for 50ms and destroy for each key press when one or more key presses occur simultaneously

Question

I want to show a rectangle for 50ms when user presses a key. draw() function works as expected for single key press. If multiple keys are pressed simultaneously say, two keys at same time then, one of the graphics object doesn't get destroyed.

function draw(x, y){
    graphics = game.add.graphics(x, y);
    graphics.clear()
    graphics.lineStyle(2, 0x0000FF, 1);
    graphics.beginFill(0x0000FF, 0.5);
    graphics.drawRect(0,0,18,18);
    graphics.endFill(0x0000FF, 0.5);
    // destroy the graphics after 50 ms
    setTimeout(function (){graphics.destroy()}, 50);


}

Answer 1

It looks like Your second draw call (done in time less than 50ms) assigns a different object in graphics so when timeout callback from the first draw call is fired it operates on graphics created in the second call.

To avoid it You can:
1) make a local variable out of graphics (add var/let)
2) use graphics.destroy.bind(graphics) as timeout callback