Jump to content

understanding( callbacks )


Jay@TastefulTitles.com

Recommended Posts

I have 3 functions that need to be executed sequentially. The first loads an .xml file, the second sorts it, and the third builds code from it. It used to work just fine to simply call them in sequence, but when I enlarged the size of the .xml file, I started getting errors where the sort function was trying to sort an undefined object.

So I've been studying callbacks. I thought I understood, but when I set up this example, it proved I don't get it at all:

<script>
	function test1(test2) {
  		alert(1)
	}
	function test2(test3) {
      	alert(2)
    }
	function test3() {
      alert(3)
    }
test1()
</script>

I thought I should get 3 alerts, 1, 2, and 3. I only get 1.

I've read through every major tutorial on callbacks, and find I'm still confused. Maybe if someone can show me how to adjust this example to get the desired result, I will see what I need to do in my real code.

Link to comment
Share on other sites

Your example code does not make much sense. You first need to understand function arguments in general before learning about callbacks. The first thing to note is that the name of the argument does not matter and is completely unrelated to any variables or functions outside of the function that the argument belongs to.

A callback is just a function that is passed as an argument. You then call it in the same way as you call any other function.

// Declare functions
function a(x) {
    x();
}

function b() {
  alert("TEST");
}


// Pass b as a callback to a.
a(b);

 

Link to comment
Share on other sites

Thanks for the quick response. I've been passing arguments to functions for more than 40 years. (A game I wrote for the Commodore 64 was chosen as one of the 12 best ever published in Compute's Gazette.) But I've only worked in js occasionally for 10 years, and am new to callbacks. Even so, I can't see how what you did is different from what I did.

I declared 3 functions. None of them required any arguments to accomplish their function. (Neither do the 3 in my real code.)

I passed function test2 as a callback to test1....

Okay, I think the lightbulb just went on... I was passing the callback function in the function definition, rather than in the function call. (I really thought that's what I was seeing in the examples.) So is this right?

<script>
	function test1(x) {
  		alert(1);
		x(test3);
	}
	function test2(x) {
      	alert(2)
		x()
  	}
	function test3() {
      alert(3)
  	}
   test1(test2)
</script

It seems to give the desired results, but please let me know if you see a problem. I think I can make it work now, but for some reason my brain is still struggling with it. 

Thanks for powering up the lightbulb!

[On a completely separate note, is there a way to keep this code editor from doing such bizarre things with indents?]

Link to comment
Share on other sites

In your original code you seemed to be under the assumption that the argument name is the name of the function it should be calling, but that is not the case. The callback has to be passed in when the function is called and executed inside the body of the function.

Your new code works without a problem, but it relies on test3 being in the global scope.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...