JS Recursive function call

Question

If I call the function once like this

var button = document.querySelector('button');

button.addEventListener('click', once);

function once() {
  console.log('one');

  button.removeEventListener('click', once);
}

It's calling only once.

But if I called like this once()

var button = document.querySelector('button');

button.addEventListener('click', once());

function once() {
  console.log('one');

  button.removeEventListener('click', once());
}

Exception throws

Exception: InternalError: too much recursion

Could you please explain why this is happening.

if you use the `()` after the function name, the function is executed. And you don't want to be executed when you pass to method like `addEventListener` or `removeEventListener`, so just remove it. — Mario Santini, Aug 01 '16 at 13:24

score 2 · Accepted Answer · edited May 23 '17 at 12:22

2

() after function name invoke's the function. So as button.addEventListener('click', once()); you are bind the return value of once() method which is undefined.

And since once() is called recursively without any break statement, you are getting the InternalError: too much recursion.

You should pass the function reference.

button.addEventListener('click', once);

For Additional Info:

Pointer Vs Delegates

edited May 23 '17 at 12:22

Community

1
1

answered Aug 01 '16 at 13:22

Satpal

132,252
13
159
168

The question was why it is doing `too much recursion` in the other case – ganesshkumar Aug 01 '16 at 13:23
@Satpal Thanks for the answer. Could you please point Mozilla documentation reference also. – gvgvgvijayan Aug 01 '16 at 13:24
@gvgvgvijayan, documentation for what? – Satpal Aug 01 '16 at 13:26
From here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference – gvgvgvijayan Aug 01 '16 at 13:27

score 1 · Answer 2 · edited May 23 '17 at 12:08

If you put () after the name of a variable holding a function, then you call the function.

If a function calls itself, then it will get called, call itself, call itself again and so on unto infinity. This is recursion. Doing something unto infinity will cause a computer to run out of memory, so it is undesirable.

JavaScript engines prevent this by throwing an exception when you try it.

(There are exceptions, of course, a function that calls itself conditionally can be very useful).

score 1 · Answer 3 · answered Aug 01 '16 at 13:29

The first code is correct, because you register the function to be called.

The second code tries to register the result of the function call once(). This means you actually execute the function when you only want to register it. Now, in your function body, you do the same to deregister the callback. Here again, you call the function you are already executing and hence, you recurse infinitely.

JS Recursive function call

3 Answers3