Question

我已经定义了一个函数并将其称为递归函数并且无法正常工作这是代码

$(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

它工作得很好。您必须记住fadeOut和fadeIn函数是异步的。这意味着，浏览器不会等到动画完成后再执行下一行代码。因此，在动画完成一次迭代之前，您的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();
            });
        });
    }
});

Jsfiddle

JavaScript中的递归调用不起作用？

2 个答案: