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
– Mario Santini, Commented Aug 1, 2016 at 13:24

Community · Accepted Answer · 2017-05-23 12:22:59Z

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, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 1, 2016 at 13:22

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ganesshkumar Over a year ago

The question was why it is doing too much recursion in the other case

gvgvgvijayan Over a year ago

@Satpal Thanks for the answer. Could you please point Mozilla documentation reference also.

Satpal Over a year ago

@gvgvgvijayan, documentation for what?

gvgvgvijayan Over a year ago

From here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

Community · Accepted Answer · 2017-05-23 12:08:03Z

1

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).

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Aug 1, 2016 at 13:24

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Michael Hoff · Accepted Answer · 2016-08-01 13:29:06Z

1

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.

answered Aug 1, 2016 at 13:29

Michael Hoff

6,3581 gold badge16 silver badges38 bronze badges

Collectives™ on Stack Overflow

JS Recursive function call

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related