0

関数を定義し、それを再帰的に呼び出しましたが、ここで機能しないのはコードです

$(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();
    }
});
4

2 に答える 2

8

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/

于 2013-11-05T14:49:52.723 に答える
2

うまく機能しています。fadeOutandfadeIn関数は非同期であることを覚えておく必要があります。つまり、ブラウザーはアニメーションが完了するまで待たずに、次のコード行を実行します。その結果、slider()アニメーションが 1 回の反復を完了する前に、関数が何千回も呼び出されます。

コンソールを見ると、次のエラーがスローされていることがわかります。

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();
            });
        });
    }
});

ジャスフィドル

于 2013-11-05T14:59:42.020 に答える