javascript - 递归动画抛出：超出最大调用堆栈大小

Question

我们目前正在尝试将我们网页中使用的 jquery 从 1.8 升级到 1.10.1，但这破坏了页面中的一些功能。我能够隔离实际代码并且很惊讶地看到这一点。我之前运行的递归动画代码抛出错误。下面是代码。

   <script>
         $(document).ready(function(){
             glowOpenItems(500);
         });
         function glowOpenItems(duration){


                    $('#dialog').addClass('glowed',duration, function(){ 
                        $(this).removeClass('glowed',duration,function(){glowOpenItems(duration)});
                    });

            }
    </script>
    <style>
        .glowed{
                box-shadow: 0px 0px 40px 3px #e14f1c;
              }
    </style>
    <div id="dialog" title="Basic dialog">
      <p>Test Code</p>
    </div>

进一步调查发现这东西有效

$(document).ready(function(){

            animate();
         });

         function animate() {
                $('#dialog').animate({backgroundColor:'#ffcc00'}, 500, function(){
                    $('#dialog').animate({backgroundColor:'#3b5998'}, 500, function(){
                            animate();
                    });
                });
            }

但是，每当将动画方法更改为addClass时，都会收到“未捕获的 RangeError：超出最大调用堆栈大小”。好像jquery的addclass有变化。任何帮助将不胜感激。

Answer 1

你的递归中没有base case。所以简单地说它不会脱离递归（无限递归。）。这就是为什么你得到最大的调用堆栈错误。尝试添加可以中断递归的基本情况。

在您的情况下'[id$="reqGlowPanel"]').length>0 && run == true，任何表达式都不会随着函数的执行而改变。因此，如果它们是真实的，那么它们将一直是真实的。

尝试这样的事情：（这只是一个逻辑，所以语法可能会出错。）

function glowOpenItems(duration){

                duration--   //decrease your duration in each call
                if(duration <= 0) 
                    return //the base case   
                else
                    $('#dialog').addClass('glowed',duration, function(){ 
                    $(this).removeClass('glowed',duration,function()    {glowOpenItems(duration)});
                });

Answer 2

考虑部分：

$j('[id$="highlightPanelOpenRequiredItems"]').removeClass('glowed',duration,glowOpenItems(duration));

我想你应该放入glowOpenItems(duration)一个内联函数：

$j('[id$="highlightPanelOpenRequiredItems"]').removeClass('glowed',duration,function(){glowOpenItems(duration);});

另外，你不应该执行 jQuery 选择器太多次。考虑将选定的 jQuery 对象分配给一个变量并重用它。