Question

好的，我想出了这段代码

<script type="text/javascript">
    $(document).ready(function(){
        var im1 = $("#slider li.first");
        function rev(){ 
            console.log('riv 1 is running now');
            im1.delay(500).animate({marginTop: "-170px"})
               .delay(500).animate({marginTop: "-340px"})
               .delay(500).animate({marginTop: "-510px"})
               .delay(500).animate({marginTop: "0px"}).trigger('stop');
        }

        im1.bind('stop',function(){
            console.log("rev is called on stop")
            rev();
        });

        console.log("rev is called the first time");
        rev();      
    });
</script>

我想要做的就是当文档准备就绪时，我调用一个名为rev（）的函数。这个功能的作用是启动一个动画，在滑块上滑动4个图像。当动画结束时，我会触发一个名为stop的事件。另一方面，我已经定义了一个事件处理程序，它跟踪stop事件并再次运行函数rev（）。

这个问题是当页面加载时，这些函数在开始动画之前会运行数千次，并且当超出回调函数的限制时（大约运行函数1709次后），它会在控制台上显示错误 “未捕获RangeError：超出最大调用堆栈大小”

有没有更好的方法呢？

Answer 1

Answer by Jawad Hyder：

我已经找到了问题所在。我所要做的就是在最后一个动画的回调中调用rev函数。

代码看起来像这样，

<script type="text/javascript">

        $(document).ready(function(){

        var im1 = $("#slider li.first");

        function rev(){ 
            console.log('riv 1 is running now');
            im1.delay(500).animate({marginTop: "-=170px"})
            .delay(500).animate({marginTop: "-=170px"})
            .delay(500).animate({marginTop: "-=170px"})
            .delay(500).animate({marginTop: "0px"},function stopped (){
                                                   rev();   
                           console.log(" played again! ")
                                   }
             );
        }

        console.log("rev is called for the first time");
        rev();      
        });
        </script>

如果其他人遇到同样的问题，请使用相同的技巧。

坚持使用简单的滑块

1 个答案: