js递归错误

Posted 2021-01-05 挑战者V

错误信息:Uncaught RangeError: Maximum call stack size exceeded

问题代码:


js代码:
$(function(){
    
    selectToggle();
});


//自动加载菜单栏
function selectToggle(){

    $(".m-menu__toggle").click();
    
}    


html代码:
<a  href="#" class="m-menu__link m-menu__toggle" onclick="selectToggle()">
    <i class="m-menu__link-icon flaticon-share"></i>
    <span class="m-menu__link-text">
    {{module.moduleName}}
    </span>
    <i class="m-menu__ver-arrow la la-angle-right"></i>
</a>

错误原因:
错误根据中文翻译,意思为:最大堆栈超过了最大值。

反复循环调用导致最大堆栈超过最大值

每个浏览器都不一样，例如常用的Chrome和FireFox

• Firefox: 50994
• Chrome: 10402

 

解决办法:仔细审查代码，出现这种情况是因为函数不合理的循环调用导致的。

另外科普下什么是递归(引用百度百科):

程序调用自身的编程技巧称为递归（ recursion）。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。