Use same variable that is defined in another function

Question

This may seem simple to some but I am less experienced with JavaScript. I have two functions. One is called when my upload begins. The next is called when my upload ends.

In the first function, a variable is created, a unique id used for the upload. What is the best way to go about reusing it in my second function since it is not global? The reason I defined it within my function is because every time a user clicks the upload button, the function is called and a NEW id is created for that upload, that is why I do not want to define it outside because then the same id would be served for a second upload unless the page is refreshed.

Anyone got any suggestions?

function uploadstart() {

    function makeid() {
        var text = "";
        var possible = "abcdefghijklmnopqrstuvwxyz0123456789";

        for( var i=0; i < 32; i++ )
            text += possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
    }

    var rand_id = makeid();

}

uploadfinish(){
    //rand_id will be undefined
}

Answer 1

Pass in that var as a parameter

uploadstart(){
function makeid()
{
    var text = "";
    var possible = "abcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < 32; i++ )
    text += possible.charAt(Math.floor(Math.random() * possible.length));

return text;
}
var rand_id=makeid();

//Pass in rad_id
uploadfinish(rand_id);
}

uploadfinish(radomID){
//rand_id will be undefined
}

Answer 2

Try declaring rand_id in global scope (before everything)

var rand_id;
function bla....

Answer 3

The solution to this problem depends on how and where you use those two functions. If you pass them as callbacks to another function from some ajax library, or something like that, and if you control that library call, you could use a closure.

So, if for example you do something like this when an upload is begun:

Library.foo(..., uploadstart, uploadfinish);

You could define makeID as a global function, and then bind the generated id to your callbacks using a function like this:

function bind_id(rand_id, my_function) {      
  return function() { // return a closure
    return my_function(); // my_function is executed in a context where rand_id is defined
  }
}

Then you define your callbacks using rand_id as if it were global (actually, it will defined in the closure):

function uploadstart() {
  // use rand_id as you wish
}

function uploadend() {
  // use rand_id as you wish
}

When you need to call your Library.foo function, first generate the rand_id, then bind it to the start and end callbacks:

var new_rand_id = randID();

Library.foo(..., bind_id(new_rand_id,uploadstart), bind_id(new_rand_id,uploadend));

This way you'll pass to foo not the original uploadstart and uploadend, but two closures where rand_id is defined and i the same for both, so that callback code can use that variable.

PS: closures are one of the most powerful and trickiest features of javascript. If you're serious about the language, take your time to study them well.

Answer 4

What do you do with the rand_id once you've created it? Could you not just call uploadfinish with the rand_id as a parameter?

function makeid()
{
   ...
}
var rand_id=makeid();
uploadfinish(rand_id);
}

uploadfinish(id){
//rand_id will be 'id'
}

[EDIT] Since you said you need to call the function externally, check out this page for details about callbacks:Create custom callbacks

function doSomething(callback) {
    // ...

    // Call the callback
    callback('stuff', 'goes', 'here');
}

function foo(a, b, c) {
    // I'm the callback
    alert(a + " " + b + " " + c);
}

doSomething(foo);

That will call doSomething, which will call foo, which will alert "stuff goes here".

Note that it's very important to pass the function reference doSomething(foo), rather than calling the function and passing its result like this: doSomething(foo()).