Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Setting variables outside event handler scope

    Hello,

    I've been having a lot of trouble with assigning values to variables residing outside event handler functions. Here's an example that doesn't work like I want:

    Code:
    <!-- some.html -->
    <script>
    // I want this function to return the response text from "response.php" on the server via HTTP request:
    function request(url) {
    	var req = new XMLHttpRequest();
    	var text = null;
    	
    	req.onload = function(e) {
    		text = this.response;
    
    		console.log('Inside req.onload():', text); // Here text == 'Blah.'
    	};
    
    	req.open('GET', url, true);
    	req.setRequestHeader('Content-Type', 'text/plain');
    	req.send();
    	
    	console.log('Inside request():', text); // Here text == null, I want 'Blah.'
    
    	return text;
    }
    
    function test() {
    	var text = request('response.php');
    
    	console.log('Outside request():', text); // Here also text == null, I want 'Blah.'
    }
    
    test();
    
    /*
    OUTPUT:
    Inside request(): null
    Outside request(): null
    Inside req.onload(): Blah. 
    */
    </script>
    Code:
    // response.php
    echo 'Blah.';
    How could I change the values of variables outside event handlers?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    The problem is not the "changing" of values ... the problem is the timing. The value will be changed correctly inside the "onload" event handler, and if you access this variable afterwards(!), it will be correct.

    But AFTERWARDS means: Afterwards in time and not in code location.

    What does that mean?

    With XMLHttpRequest you are starting an AJAX request. The first A in AJAX means "asynchronous". This is where the issue is. If you start an asynchronous request, it will continue to run in the background while your normal program flow already continues. So the code lines after the request will already be executed while the request is still running. At this point of time, the variable value will not have been changed. Only after (time ... not place) the request finished, the "onload" event handler will be called and the value of the variable will be changed.

    Solution: If you want to do anything with values changed in callbacks of asynchronous method calls, you should do it inside the callbacks. Alternatively, you could also call another function from inside the callback and use the changed value as a parameter. Inside this function you will have access to the changed value ... because it will only be called after the asynchronous request finished!

  • Users who have thanked devnull69 for this post:

    kasue (10-21-2013)

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh, I see. Now I understand the problem. Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •