javascript - js recursive function, reports Stack overflow error after running more than 500 times?

1. PHP development, there is a need to read more than 1700 xml file data and store it in the database. My method is to use js function recursion on the front end and submit one at a time through AJAX. The current problem is that the recursive function of js is run about 500 times, and the browser reports a Stack overflow error and stops running.
2. Front-end recursive function:
function update_hotelInfo_queue(data,i)

<code>    {
        if(i==(data.length-1))
        {
            return;
        }
        $("#processInfo").html("正在处理第"+(i+1)+"个城市数据<br>");
        var url="__CONTROLLER__/updateHotelInfo";
        var cityID=data[i];
        console.log(i+"==>"+cityID);
        $.ajax({
            url:url,
            cache:false,
            async:false,
            dataType:"json",
            type:"POST",
            data:{cityID:cityID},
            success:function()
            {
                update_hotelInfo_queue(data,i+1)
            }

        })
    }
    </code>

3. This error is caused by the browser judging that the current recursion is an infinite loop?
4. Supplement error information

JS novice please give me some advice~~

Reply content:

1. PHP development, there is a need to read more than 1700 xml file data and store it in the database. My method is to use js function recursion on the front end and submit one at a time through AJAX. The current problem is that the recursive function of js runs about 500 times, and the browser reports a Stack overflow error and stops running.
2. Front-end recursive function:
function update_hotelInfo_queue(data,i)

<code>    {
        if(i==(data.length-1))
        {
            return;
        }
        $("#processInfo").html("正在处理第"+(i+1)+"个城市数据<br>");
        var url="__CONTROLLER__/updateHotelInfo";
        var cityID=data[i];
        console.log(i+"==>"+cityID);
        $.ajax({
            url:url,
            cache:false,
            async:false,
            dataType:"json",
            type:"POST",
            data:{cityID:cityID},
            success:function()
            {
                update_hotelInfo_queue(data,i+1)
            }

        })
    }
    </code>

3. This error is caused by the browser judging that the current recursion is an infinite loop?
4. Supplement error information

JS novice please give me some advice~~

"Tail Call Optimization" http://www.ruanyifeng.com/blo...

The advantage of recursive functions is that they can make the code concise and do more things with less code.

But there is a big disadvantage that it takes up memory. We know that every time a function is called, a part of the memory is consumed, which is called pushing. After the function is executed, the memory is released, which is called popping.

Every time a recursive function recurses, it depends on the result of the next recursion before it can be output. In this way, the function is always pushed into the stack without being popped out, and the memory is always occupied and not released in time.

So your error report is reasonable. Stack overflow translates to stack overflow.

The solution is simple, it is recommended to use a loop, so that every time the loop is executed, the memory will be automatically released without relying on anyone

Adjust the recursive algorithm to implement recursive tail calls

You don’t need recursion at all, use a loop. Tail recursion is useless for js, and it doesn't seem to be optimized.

Ajax’s dependency callback needs to use promise-defferd, but there are more than 1,700 pieces of data, are you sure you want to use this method?

If you use your previous method, which is recursion, see if you can do it in batches.

Don’t use recursion where loops can be used. Recursion is used to solve cases where loop algorithms are used to solve problems such as the Tower of Hanoi. The price of recursion is stackoverflow.