Why is my javascript code going into an infinite loop?

Question

In the code below, whenever I click on the submit button, multiple window's open up as it it were in infinite loop. If I uncomment alert, then multiple alerts keep popping like they were in infinite loop. Why could this be happening ?

<html>
<head>

<script type = "text/javascript">
    var window;

    function moveBy() {
        //alert("-- hello ---");
        window = window.open("http://www.w3schools.com");
        window.moveBy(10, 20);
    }
</script>


</head>
<body>
<input type = "submit" value = "moveBy" onclick = "moveBy()"> </input>
</body>
</html>

You have a three line function and can't see why it's looping infinitely? — j08691, Nov 04 '15 at 16:54
When you declare a function in the global scope, it attaches to the `window` object in the browser. That said, you create a function called `moveBy` then call it within itself. — doogle, Nov 04 '15 at 16:55
You can't assign a new value to `window`. `window = ....` doesn't change the value of `window`, so the `window` in the last line of your function is still the global `window` object. — JLRishe, Nov 04 '15 at 16:56
When you use recursion in js you must always have an exit case to prevent infinite loops. — colecmc, Nov 04 '15 at 16:56
The easiest solution is to name your function something other than an [existing method](https://developer.mozilla.org/en-US/docs/Web/API/Window/moveBy). — j08691, Nov 04 '15 at 17:02

score 8 · Answer 1 · edited May 23 '17 at 11:51

Javascript does not support method overloading, so by calling window.moveBy(10, 20); you are actually basically calling moveBy() again, resulting in an infinite loop.

Calling a function from itself is called recursion. The linked post is a good read on this topic, and will guide you on where you might want it. But in your case you clearly don't.

Have a read of this article for more detail.

To prevent this from happening, you can rename your moveBy() function to myMoveBy() or better openAndMoveBy()

score 7 · Answer 2 · answered Nov 04 '15 at 16:53

7

Because you call function moveBy from itself.

answered Nov 04 '15 at 16:53

Bogdan Savluk

6,274
1
30
36

taxicala · Accepted Answer · 2015-11-04T17:02:53.240

You are creating a recursion (function that calls itself) by calling window.moveBy inside your moveBy function without stating a break point or exit case:

function moveBy() {
    //alert("-- hello ---");
    window = window.open("http://www.w3schools.com");
    window.moveBy(10, 20); //recursion, it will call this function over and over again.
}

Maybe what you want is to use another name for your function and call the actual window.moveBy inside with predefined parameters:

function customMoveBy() {
    //alert("-- hello ---");
    window = window.open("http://www.w3schools.com");
    window.moveBy(10, 20);
}

<input type = "submit" value = "moveBy" onclick = "customMoveBy()"> </input>

score 1 · Answer 4 · answered Nov 04 '15 at 16:59

The problem is that you are calling the function moveBy inside the funtion moveBy. Whenever you execute the function you call it again and again ...

Try this:

<html>
<head>

<script type = "text/javascript">
    var window;

    function moveBy() {
        alert("-- hello ---");
        window = window.open("http://www.w3schools.com");
        //window.moveBy(10, 20);
    }
</script>


</head>
<body>
<input type = "submit" value = "moveBy" onclick = "moveBy()"> </input>
</body>
</html>

Why is my javascript code going into an infinite loop?

4 Answers4