Jquery/javascriptを使用して再帰関数をループ関数に変換する方法

Question

Jqueryを使用してスライドショーを作成しようとしていますが、画像は5.5秒ごとに呼び出される関数によって循環されます。しかし、反復呼び出しと比べて非常に高価であるため、再帰を避けようとしています。そして私はそれがIEがスライドショーが読み込まれたときに停止していない読み込みアイコンを持つ原因だと仮定しています。ですから、私は以下の関数を反復的なものに変換したいと思います。

function playslides() 
{ 

//hide previous slide 
$(document.getElementById(t)).fadeOut("slow"); 


//reset slide index 
calcSildes(); 

//show new slide 
$(document.getElementById(t)).fadeIn("slow"); 

//recursive call after 5.5 sec 
timer = setTimeout("playslides()", 5500); 

} 


//on page load... 

$(document).ready(

playslides(); 

); 

は、これまでのところ、私の2つの方法がある：

1. は、whileループ$（ドキュメント）.ready（）関数とループplayslides内部（）関数を作成します。

2. playslides（）関数を呼び出す別のtimer関数を作成し、その関数をplayinglides関数が呼び出すようにします。 （再帰をまったく避けるかどうかはわかりません）

ありがとう!!

Answer 1

サウンズキャンセル。再帰やループの必要はありません。

Quoting John Resig、jQueryのの作成者：基本的なレベルで

それがどのようにJavaScriptの タイマーの仕事を理解することが重要です。 の単一スレッドのために、直感的に動作しない場合があります。 タイマーを構築して操作できるアクセス可能な3つの 関数を調べてみましょう。

var id = setTimeout(fn, delay); - 遅延後に指定された機能を に呼び出す単一のタイマーを開始します。この関数は、 の一意のIDを返します。これにより、後でタイマーをキャンセルすることができます。

var id = setInterval(fn, delay); - setTimeoutに似ていますが、キャンセルするまで関数を（毎回遅延して）継続的に呼び出します。

clearInterval(id);、clearTimeout(id);は - （前述した機能のいずれかによって を返した）タイマIDを受け取り、発生タイマー コールバックを停止します。

setInterval使用すると、次のようにコードを簡素化することができます：

function playslides() 
{ 
    //hide previous slide 
    $(document.getElementById(t)).fadeOut("slow"); 

    //reset slide index 
    calcSildes(); 

    //show new slide 
    $(document.getElementById(t)).fadeIn("slow"); 
} 

$(document).ready(function() { 
    setInterval(playslides, 5500); 
}); 

Answer 2

遅延ループを使用してループを作成することはできません。

唯一の最適化がplayslidesで"playslides()"を交換し、同じオブジェクトを参照するjQueryのオブジェクトをキャッシュされています。あなたは、単にそのまで、与えられた関数を繰り返しれる、setInterval()でsetTimeout()を置き換える必要がありますように

var timer; 
function playslides($element) { 
    //hide previous slide 
    $element.fadeOut("slow"); 

    //reset slide index 
    calcSildes(); 

    //show new slide 
    $element.fadeIn("slow"); 

    //recursive call after 5.5 sec 
    timer = setTimeout(playslides, 5500, $element); 
} 

// Bug fix too, wrap document.ready in `function(){ 
$(document).ready(function(){ 
    playslides($("#"+t));  
}); 

Answer 3

https://developer.mozilla.org/en/window.setInterval

var intervalID = window.setInterval(playslides, 5500); 

Answer 4

これは再帰関数ではありません。再帰関数は、基本ケースに達するまでメモリ内に自身のコピーを作成して保持し続けます。その後、スタックが巻き戻され、値が返されます。また、再帰呼び出しのパラメータを変更する必要があり、最終的に基本ケースにつながります。

PHP例：

function recursive_function($num){ 
    if ($num == 0){ //base case 
     return 10; 
    }else{ 
     return $num + recursive_function($num-1); 
    } 
} 

recursive_function(5);//output is 25 

あなたの機能だけで元がメモリを離れた後、同じ関数を呼び出す新しいタイマーを作成しています。

「timer = setTimeout（playslides、5500、$ element）;」を削除します。プレイライド機能のライン。

'playslides（$（ "＃＃" + t））;'を置き換えます。 document.ready関数内で呼び出す：

timer = window.setInterval(function(){ 
    playslides($("#"+t)); 
}, 5500); 

は、あなたが適切に（ないHTML5で...古いブラウザ用）のパラメータを渡すためのsetIntervalの匿名関数を作成する必要があります。