# Control the order of returning callbacks
**URL:** https://discourse.processing.org/t/control-the-order-of-returning-callbacks/33657
**Category:** Coding Questions
**Created:** [November 21, 2021, 10:16pm UTC](https://discourse.processing.org/t/control-the-order-of-returning-callbacks/33657 "2021-11-21T22:16:40Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@SMD](https://discourse.processing.org/u/SMD)
#### Post date: [November 21, 2021, 10:16pm UTC](https://discourse.processing.org/t/control-the-order-of-returning-callbacks/33657/1 "2021-11-21T22:16:40Z")
Hi all
I’m trying to load multiple large images (3600x1800) into a p5 sketch. I can’t use preload because there are over 300 of them and memory issues are crashing the browser. Speed isn’t important though so I’m using callbacks to load and handle them one at once instead like this:
for(var picno=1;picno\<=numimages;picno++){
filename="./f"+picno+".png";
```
loadImage(filename, tempimage => {
image(tempimage,0,0);
tempimage.loadPixels();
processPixelArray(tempimage.pixels);
});
```
}
function processPixelArray(){
etc
}
The above works except that I need to process the pixel arrays in the order I loaded the images and as the images have different file sizes, the callbacks are coming out of the order that loadImage was called.
I’ve tried variations along the lines of:
var lock=0;
var picno=1;
while(picno\<=numimages){
filename="./f"+picno+".png";
if(lock==0){
lock=1;
loadImage(filename, tempimage =\> {
image(tempimage,0,0);
tempimage.loadPixels();
processPixelArray(tempimage.pixels);
lock=0;
pickno++;
});
}
}
but that locks up the browser as well.
How can I maintain / keep track of the order of these loadImage calls? Is there a way that I can pass in the current value of picno to the callback function (Then read it back in processPixelArray) so that I can track and reorder the data from the callbacks myself?
Thanks as usual for any help…
Simon
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [November 22, 2021, 2:09am UTC](https://discourse.processing.org/t/control-the-order-of-returning-callbacks/33657/2 "2021-11-22T02:09:44Z")
> [@SMD](#):
>
> Is there a way that I can pass in the current value of _picno_ to the callback function…
A callback’s parameters are pre-determined. We can’t change the arguments passed to it; b/c obviously it’s not us who invokes it.
However, an inner callback created on-the-fly like you have there can access closures, which are variables & parameters declared in its outer function:
> **[Closures - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)**
>
> A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript,...
In your case, variable _picno_ is the `for ( ; ; )` block’s iterator.
The **loadImage()**'s callback can use _picno_ as a closure within its body. However there’s a glitch if you do so!
By the time the inner callback is actually invoked, _picno_ will currently have its final value, which is the value of _numimages_ plus 1!
But if you declare _picno_ w/ keyword `let` instead of `var`, _picno_’s current value will be bound for each iteration:
> **[let - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)**
>
> The let declaration declares re-assignable, block-scoped local variables, optionally initializing each to a value.
That means that each callback created inside that loop will have its own _picno_’s value when internally used as a closure.
---
### Author:  [@SMD](https://discourse.processing.org/u/SMD)
#### Post date: [November 22, 2021, 5:55am UTC](https://discourse.processing.org/t/control-the-order-of-returning-callbacks/33657/3 "2021-11-22T05:55:50Z")
Many thanks for this, GoToLoop. You solved my problem!
- Simon