JS在函数内部获取变量

Question

I have a function to do something on onClick event.

function onDocumentMouseUp( event ) {
    createsprite(clickedposition);
}

createsprite(clickedposition) {
  var sprite = JSONSPITE // this add correctly sprite to my scene;
  //// here timer function 1 sec
  setTimeout(function(){ remove(sprite); }, 1000);
}

Everything works correctly. But when i click more than once, i have still my variable sprite as a last added one. (yes i know that is correct). And logically remove() have affected only that last one.

What is the correct solution to handle work with unknown amount of same variables. Purpose it too remove each sprite after one second after click one by one in the order of creation.

How can i reach only one variable in the same function, even when there are more variables with the same name on each function init.

Answer 1

You have defined sprite as a global variable. It will exist not only in that function, but is created on the window object.

If you want to remove only the sprite you created in that function, you should make it a variable

var sprite = JSONSPITE; // typo?

This way, the scope of the sprite variable is just that function.

EDIT: OP has changed their question, making the previous explanation seem obsolete

If you want to create multiple sprites, and store them somewhere so you can access them before they are deleted, you might want to create an array of sprites.

sprites = [];

function onDocumentMouseUp( event ) {
    createsprite(clickedposition);
}

function createsprite(clickedposition) {
  sprites.push(JSONSPITE); // Adds the current sprite to the end of the array
  setTimeout(function(){
    var firstSprite = sprites.shift(); // Takes the first sprite out of the array
    remove(firstSprite); 
  }, 1000);
}