[RESOLVED] Help with scope on anonymous f'ns

[catgirl]

Hi all,

What I am trying to do is write a function that submits an XMLHttpRequest and in the callback, call a function back on my caller and pass in all arguments that the submit function received.

Perhaps it's easier to demonstrate:

function submitXMLHttpRequest(url, callbackFun /*, maybe other args here */)
{
    var originalArgs = arguments;  // grab args so callback can pass them thru
    <snip>
    req.onreadystatechange = function (aEvt) {
	if (req.readyState == 4)     
	{
	    if(req.status == 200)
		callbackFun.call(req.responseText, originalArgs);
	    else
     <snip>

So I could call it like this in one script:

function makeXMLHttpRequest()
{
       submitXMLHttpRequest(url, callbackFun1, onearg);
}

function callbackFun1(response, args)
{
       var onearg= arguments[3];  // get back the arg sent in the make call
}

And in another script could call it like this:

function makeXMLHttpRequestAgain()
{
      submitXMLHttpRequest(url, callbackFun2, somearg, anotherarg);
}

function callbackFun2(response, arguments)
{
       var somearg= arguments[3];
       var anotherarg = arguments[4]; // get back both args sent in the make call
}

So basically I want to pass values from where I am calling the submit request through to the callback I want executed back in my script by passing them through the onreadystatechange callback but it's not working. The arguments parameter in my callbackFun1 and callbackFun2 are always undefined.

Can someone help me understand why this doesn't work? I thought since the onreadystatechange is a closure, I have access to all of its enclosing scope, so shouldn't I have access to the original arguments passed into the submitXMLHttpRequest method so I can pass them through to the callback I desire? In some cases I have 3 parameters I need passed between methods, sometimes only 2, so instead of naming them, I wanted to pass via arguments.

Thanks very much.

[scragar]

Try using a wrapper.

req.onreadystatechange = (function(topArgs){// anything else you may need
	return function (aEvt) {
		if (req.readyState == 4){
			if(req.status == 200)
				topArgs[3].call(req.responseText, topArgs);
			else
////..............
	})(arguments);// close the wrapper

[catgirl]

Interesting! I've only been doing Javascript a couple of months, I've not even seen that technique and will give it a try.

[catgirl]

So I see where you are going with this scragar and I agree it should work but it doesn't. I've tried for hours without success. The desired callback function gets called but any arguments I have passed to it seem to be null. I can log the response in my readystatechange callback to ensure that I have one, then pass it to my callback that I trigger in the call statement and when I get there it's null.

Thanks for your help though, and for introducing me on to this technique.

[scragar]

Can you show me the code you are using? The code I posted should work, but since you had to edit it I understand how it's only too easy to remove something simple.
Also, if you get any error messages it might be worth posting those.

[catgirl]

He he, dedicated guy, workin' on a Saturday!

Ok here it is and I've noticed something strange which I will point out after the code:

calling script

  function doSomethingInteresting()
  {
      var url = "www....";
      var threadId = "1234567";
      submitXMLHttpRequest(url, testFunction, threadId);
  }

  function testFunction(response, passThroughArguments)
 {
    log (response);
 }

script that's got the submit method in it:

function submitXMLHttpRequest(url, callbackFun)
{
     var req = new XMLHttpRequest();
     req.open("GET", url, true);
     req.onreadystatechange = (function (passThruArgs) {
	return function (aEvt) {
		if (req.readyState == 4)        
		{
		    if(req.status == 200)
		    {
			log (req.responseText);
			passThruArgs[1].call(req.responseText, passThruArgs);
		    }
		    else
			log ('request for message ' + url + ' failed);
		}
	};  // end callback function
    })(arguments); // end wrapper function and execute it immediately to preserve scope

    req.send(null);
}

And what I am noticing is strange is if I put a breakpoint in my callback function, in testFunction, the first argument, response, has the pass through arguments in it, and the second argument, passThroughArguments, is null. The args seem to be displaced by 1 and I don't get the response at all. When I log the responseText in onreadystatechange before making the call call it looks exactly as it should.

I have tried not passing the passThruArgs from onreadystatechange at all, so like this

    passThruArgs[1].call(req.responseText);

but the function argument in testFunction is still null so it's not the passing thru of args that's screwing it up.

I also tried passing the request in to the scope preserving function, so this:

        };  // end callback function
    })(req, arguments);

and that didn't work either.

[Scriptage]

You need to use apply: callbackFun.apply(this, originalArgs).

[catgirl]

Hmmm, I thought because I was passing an array either call or apply would work...?

[Scriptage]

No, use call for named parameters, use apply when sending an array object: https://developer.mozilla.org/En/Cor...Function/Apply

[catgirl]

Ah ok I read that, and interpreted it as if I wanted to pass a whole array I use apply, if I wanted to pass in individual args I could use call but that one of those args could be an array. Ok, I am clear on that now.

But I tried what you suggested, that's not working for me either.

onreadystatechange function now says:

     log ('passthruargs length is ' + passThruArgs.length);
     log (req.responseText);
     passThruArgs[1].apply(this, passThruArgs);

If my testFunction is as follows:

function testFunction(response, args)
{
    log ('response is ' + response.responseText);
    log ('args length is ' + args.length);
    log ('args 0 is ' + args[0]);
    log ('args 1 is ' + args[1]);
    log ('args 2 is ' + args[2]);
}

The output I get from this is:

passthruargs length is 3
the responseText
response is undefined
args length is 2
args 0 is <url i passed in>
args 1 is <entire definition of the testFunction function>
args 2 is undefined

So I'm not getting the response text and the third argument which are really the two things I need to be getting into my callback.

[Scriptage]

I see what's happening now:

var originalArgs = arguments; // grab args so callback can pass them thru
<snip>
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4)
{
if(req.status == 200)
callbackFun.apply(this, originalArgs.splice(0,2, req.responseText));


That will remove the first two elements of originalArgs and add responseText to the start of the array. That should do the trick.

[Scriptage]

So the reponse text is the first argument, then all additional arguments start at index 1.

[catgirl]

Hm, ok, so you have me going back to the original code I had, not the code that was suggested by scragar to wrap the onreadystatechange anonymous in order to capture the state from the outer.

Ok, I will try going back to what I had originally with the mods you have suggested

[catgirl]

Ok close but no cigar. I get the error 'originalArgs.splice is not a function'. I think that's because arguments is an array-like object, but not an instance of array, isn't it? So I can't use array functions on it.

[Scriptage]

Sorry, try this:

var originalArgs = Array.prototype.slice.call(arguments);