böyle çalışır JavaScript bir özyinelemeli tip fonksiyonu var bir işlev

Question

içinde yer alan, thats Okumayı kolaylaştırmak için işlevini basitleştirdik.

"A" nın etiketleri Ancak, zamanlayıcı clearout etmediğimiz bu

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

gibi çağrıda, zamanlayıcı çağrıldığını clearTimeout() işlevi aldırmaksızın dolaşmak devam eder.

Herhangi bir fikir neden? Bir kapsam problemiyle veya bunun gibi bir şeyle ilgisi olabilir. döndürme penceresi kapsamında olacağından linke

Eğer var döndürme kullandığınız Since sahte

Answer 1

Evet, bir global değişken döndürmek yapmak gerekir. Basitçe şöyle fonksiyonu dışında beyan:

var rotate; 
var delay = 1000; 

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

Ayrıca, size loadThumb diyoruz sen önce zaman aşımı temizlemek emin olmak gerekir. Aksi halde başlattığınız zamanlayıcıyı temizlersiniz.

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

keman: Birden zaman aşımları yönetmek varsa http://jsfiddle.net/63FUD/

Answer 2

Dönüş, bir kapsam sorunu olmamalıdır. Tam kodu gösterebilir misin?

senaryoyu satır içi zayıf kodlama kabul edilir - sen de

Bir görüntünün

deneyin çağrısında olabilecek bir işlev içinde setTimeout olmamalıdır sayfanın olay işleyicisi onload eklemelidir Bu: varsayarak

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

o kadar genel değişken olarak döndürmek olun ve dışarıdan rotate ilan değilse clearTimeout(rotate);

clearTimeout() example

Answer 4

Bu bir kapsam sorun olabilir bakın diyoruz kapsam sorun olabilir. bildiğim kadarıyla görebiliyorum gibi tüm kod sonrası etmedi çünkü yaptığınızı tam olarak emin değilim

var rotate = 0; 
function loadThumb(thumb) { 

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

} 

Answer 5

, ama bu benim için daha iyi görünüyor:

bu deneyin

function loadThumb(thumb) { 

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

} 

ve sonra:

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

Answer 6

, kendi zaman aşımı oluşturmak ve kaldırmak için küresel kapsamı ve bazı özel yöntemlerle bir nesneyi kullanabilirsiniz. Metotlara erişmek için, çağrıları bağlantılarınızın onclick işleyicisine koyabilirsiniz (örnekte olduğu gibi) ya da bunları bağlamak için jQuery gibi bir kitaplık kullanabilirsiniz.

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

ben de neden javascript