が、私はこのように実行JavaScriptで再帰型機能を持っている機能

Question

内で設定thatsの私は、読みやすくするために機能を簡素化しました。

私はこの

<a href="#" onclick="loadThumb(3); clearTimeout(rotate);">Load thumb 3</a> 

のように呼ばれる「」タグを持っている彼らは、タイマーをclearoutませんしかし、タイマーが呼び出されているclearTimeout()の機能関わらずを通じてサイクルに続きます。

なぜでしょうか？スコープの問題などと関係していると思います。

Answer 1

うん、あなたはグローバル変数を回転させるようにする必要があります。単にそのような関数外で宣言します。

var rotate; 
var delay = 1000; 

function loadThumb(thumb) { 
    alert("loading thumb: " + thumb); 
    rotate = setTimeout(function() { 
     loadThumb(thumb + 1); 
    }, delay); 
} 

をまた、あなたはあなたがloadThumb呼び出す前にタイムアウトをクリアすることを確認する必要があります。それ以外の場合は、開始したばかりのタイマーをクリアします。

<a href="#" onclick="clearTimeout(rotate); loadThumb(3);">Load thumb 3</a> 

フィドル：あなたは複数のタイムアウトを管理する必要がある場合はhttp://jsfiddle.net/63FUD/

Answer 2

戻るリンク

上の偽あなたはVARの回転を使用していないので、回転がウィンドウの範囲にあるであろうから、それはスコープの問題ではありません。あなたは完全なコードを表示できますか？

スクリプトをインライン化する貧しいコーディング考えられている - あなたはまた、あなたが一つの画像

てみために呼ばれるかもしれない関数内のsetTimeoutを持つべきではありませんページ

のイベントハンドラonloadイベントを添付しなければなりませんこの：想定し

var rotate,next=1; 
function loadThumb(thumb) { 
    if (thumb) ... use thumb 
    else ... use next 
} 

function slide() { 
    rotate=setInterval(function() { 
     loadThumb(); 
     next++; 
     if (next>=images.length) next=0; 
    }, delay); 
} 

window.onload=function() { 
    var links = document.getElementsByTagName("a"); 
    if (links[i].className==="thumbLink") { 
    links[i].onclick=function() { 
     var idx = this.id.replace("link",""); 
     loadThumb(idx); 
     clearInterval(rotate); 
     return false; 
    } 
    } 
    document.getElementById("start").onclick=function() { 
    slide(); 
    return false; 
    } 
    document.getElementById("stop").onclick=function() { 
    clearInterval(rotate); 
    return false; 
    } 
    slide(); 
} 

<a href="#" id="start">Start</a> 
<a href="#" id="stop">Stop</a> 

<a href="#" id="link0" class="thumbLink">Show 1</a> 
<a href="#" id="link1" class="thumbLink">Show 2</a> 
<a href="#" id="link2" class="thumbLink">Show 3</a> 

Answer 3

それはそうは、グローバル変数として回転させるとclearTimeout(rotate);

を呼び出すスコープの問題になる可能性がありますが、外部rotateを宣言されていない場合には、スコープの問題かもしれclearTimeout() example

Answer 4

を参照してください。限り私はあなたを見ることができるように、すべてのコードを投稿していなかったので、私は、あなたがやっている正確に何かわからない

var rotate = 0; 
function loadThumb(thumb) { 

    rotate=setTimeout(function() { 
     loadThumb(next); 
    }, delay); 

} 

Answer 5

が、これは私のために良く見える：

これを試してみてください

function loadThumb(thumb) { 

    return setTimeout(function() { 
     loadThumb(next); 
    }, delay); 

} 

、その後：

<a href="#" onclick="clearTimeout(loadThumb(3));">Load thumb 3</a> 

Answer 6

、あなたのタイムアウトを作成し、削除するために、グローバルスコープといくつかのカスタムメソッドでオブジェクトを使用することができます。メソッドにアクセスするには、（例のように）リンクのonclickハンドラに呼び出しを入れるか、jQueryのようなライブラリを使用してバインドします。

<script type="text/javascript"> 
    var timeouts = timeouts || {}; 

    function createTimeout(name, milliseconds, callback) { 
     timeouts.name = setTimeout(callback, milliseconds); 
    } 

    function removeTimeout(name) { 
     if (typeof(timeouts.name) !== undefined) { 
      clearTimeout(timeouts.name); 
      timeouts.name = undefined; 
     } 
    } 

    createTimeout('foo', 5000, function() { 
     alert('timeout') 
    }); 
</script> 

は、私はまた、なぜJavaScriptを持って