Pass a variable in a callback (not a static variable) ???

[Jonforum]

Hi guys, what is the best way to pass a no static variable for a callback inside a loop ??
ex: How to (fixing) a dynamic variable in a loop, and inject it into a CallBack

for (var i=0,R=0,C=0;i<ItemPage.length;i++,C++){
$image.showPicture(PID++, 'M_Item_ItemSlot_Shader', 0, this.d2d2d2[0]+(this.ITDxy[0]*C), this.d2d2d2[1]+(this.ITDxy[1]*R), 100, 100, 255, 0);
   $image.setPictureTrigger(PID-1, "Mouse Out", function(pictureId){ that.HoverOutItem(pictureId); });   
   $image.setPictureTrigger(PID-1, "Left Click", function(pictureId,i){ that.ClickItem(pictureId,i); }); // i whant pass i in this callback *****
if((i+1)%4===0){C=-1,R++}
}

in this example if i pass i, its take only the i valur of the end loop.
How i can give static valur of i in the callback ?

$image.setPictureTrigger(PID-1, "Left Click", function(pictureId,i){ that.ClickItem(pictureId,i); }); // i whant pass i in this callback *****

Tank a lot for help.

In ES6 , it seems so simple & easy... !!!

for (let i = 0; i < 3; i++) {
    funcs[i] = function() {
        console.log("My value: " + i);
    };
}

 

[Sarlecc]

Here's an example of using callbacks in a for loop and logging i:

test = function (iVar, callback) { return callback(iVar) }

for (var i = 0; i < 5; i++) {
    test(i, function(arg){return console.log(arg)})
}

Think of the callback as just a normal function that you want to call using the function test. In order for the callback to log i you have to pass i as an argument to the callback.

 

[Jonforum]

Here's an example of using callbacks in a for loop and logging i:

test = function (iVar, callback) { return callback(iVar) }

for (var i = 0; i < 5; i++) {
    test(i, function(arg){return console.log(arg)})
}

Think of the callback as just a normal function that you want to call using the function test. In order for the callback to log i you have to pass i as an argument to the callback.

Yes i understand, but ..

In my context the function Callback in the loop, are not executed at the moment our loop begins.
Is a callback assigned by click.
So if a put my callback with bracket, it will execute in the loop..

 

[Sarlecc]

Just a question but why not check if the mouse button is being pressed inside the update function of whatever window you are on instead and then do some function?
I also suggest reading this on callback functions scroll down to the the part about timing of callback function.

 

[Jonforum]

tank for link i will see if this can help me.

Just a question but why not check if the mouse button is being pressed inside the update function of whatever window you are on instead and then do some function?
I also suggest reading this on callback functions scroll down to the the part about timing of callback function.

Because each image has an specific assignment, and I have over 600 image to handle lol.
And depending on the context certain assignment are deleted and add

Spoiler

It's an old video, but it shows how my game engine works

 

[Sarlecc]

So you can't do something like?:

Window_Something.prototype.update = function() {
    if (TouchInput.isTriggered()){
        this.clickItem(this.pictureID, this.index)
    }
}

Sorry I cant watch videos bad bandwidth issues. :/

 

[Quxios]

In your es6 example, I don't see anything that makes that work for only es6 besides the "let" which wouldnt make that loop act any different then using var.

I haven't looked at the whole code cause it's a bit messy looking here and too lazy to open an ide and paste it in. But I think what you want is to use .bind.

So you could do something like:

for (stuff) {
  button[i].onClick = function(myI) { console.log(myI) }.bind(button[i], i);
}

Then you could just, "buttons.onClick()" with no arguments because we already binded the arg we want inside. Details on bind:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
Look at the "Partially applied functions" section for details on what I'm talking about.

 

[Jonforum]

In your es6 example, I don't see anything that makes that work for only es6 besides the "let" which wouldnt make that loop act any different then using var.

I haven't looked at the whole code cause it's a bit messy looking here and too lazy to open an ide and paste it in. But I think what you want is to use .bind.

It is true that the new forum code tag are very bad.
I have a more meaningful picture of my context.

I do another way, but it is more complex.
I would have liked to optimize my code.
I try .Bind(this,i) but, it's Bind, the pictureId too and dont give me the result i need.

 

[Quxios]

If you want the pictureId too then pass that in as well, so it should be:

.bind(this, pictureId, i);

So your bind is in the wrong spot it should be at the end of the function you just made.

And since you binded "this" as the context, you can replace that "that.clickItem" to "this.clickItem"
Also since you're just calling a single function from that function, you can remove the outer function

So something like:

$image.setPictureTrigger(PID-1, "Left Click", this.ClickItem.bind(this, pictureId, i));

 

[Jonforum]

If you want the pictureId too then pass that in as well, so it should be:

.bind(this, pictureId, i);

So your bind is in the wrong spot it should be at the end of the function you just made.

And since you binded "this" as the context, you can replace that "that.clickItem" to "this.clickItem"
Also since you're just calling a single function from that function, you can remove the outer function

So something like:

$image.setPictureTrigger(PID-1, "Left Click", this.ClickItem.bind(this, pictureId, i));

thank a lot friend, for Your explanations
I will look at this more closely