javascript - Recursive call in JavaScript not working?

Question

I have defined a function and calling it recursive and its not working here is the code

$(document).ready(function () {
//if i remove the slider call here it doesn't even run the function slider     
slider();
    function slider() {
        $("#img2").fadeOut(3000, function () {
            $("#img2").fadeIn(3000);
        });
//recursive call
        slider();
    }
});

Answer 1

它正在工作，但您在完成slider()之前再次调用fadeOut。在回调中粘贴递归调用：

function slider() {
    $("#img2").fadeOut(3000, function () {
        $("#img2").fadeIn(3000, function() {
            //As Kristof Feys pointed out, you probably want to wait for the 
            //fade in to complete, then call the method.
            slider();
        });
    });
}

还有一个演示：http: //jsfiddle.net/9k7e3/

Answer 2

它工作得很好。你必须记住fadeOutandfadeIn函数是异步的。这意味着，浏览器不会等到动画完成后才执行下一行代码。因此，您的slider()函数在动画完成一次迭代之前就被调用了数千次。

如果你查看控制台，你会看到这个错误被抛出：

Uncaught RangeError: Maximum call stack size exceeded

这意味着您调用该slider函数的次数过多。解决方案是将slider()调用放在fadeIn回调中，只有在动画完成后才会执行。

$(document).ready(function () {
    slider();
    function slider() {
        $("#img2").fadeOut(3000, function () {
            $("#img2").fadeIn(3000, function(){
                slider();
            });
        });
    }
});

提琴手