Làm thế nào để xóa một thời gian chờ javascript Thats đặt trong một hàm

Question

Tôi có một chức năng loại đệ quy trong Javascript chạy như thế này:

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

Lưu ý: Tôi đã đơn giản hóa các chức năng để làm cho nó dễ dàng hơn để đọc.

tôi đã "một" thẻ gọi như thế này

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

Tuy nhiên, họ không clearout bộ đếm thời gian, bộ đếm thời gian tiếp tục chu kỳ thông qua chức năng bất kể của clearTimeout() được gọi.

Mọi ý tưởng tại sao? Tôi nghĩ rằng nó có thể có một cái gì đó để làm với một vấn đề phạm vi hoặc một cái gì đó như thế.

Answer 1

Yeah, bạn cần phải thực hiện xoay một biến toàn cầu. Đơn giản chỉ cần khai báo nó ngoài chức năng như vậy:

var rotate; 
var delay = 1000; 

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

Ngoài ra, bạn cần phải chắc chắn rằng bạn xóa thời gian chờ trước bạn gọi loadThumb. Nếu không, bạn sẽ xóa bộ hẹn giờ bạn vừa mới bắt đầu.

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

fiddle: http://jsfiddle.net/63FUD/

Answer 2

Return giả vào liên kết

Kể từ khi bạn không sử dụng var xoay, nó không phải là một vấn đề Phạm vi từ xoay sẽ là trong phạm vi cửa sổ. Bạn có thể hiển thị mã hoàn chỉnh không?

Nó được coi là người nghèo mã hóa để inline kịch bản - bạn nên gắn onload xử lý sự kiện của trang

Ngoài ra bạn không nên có các setTimeout bên trong một hàm có thể được gọi là một hình ảnh

Thử này:

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

giả

<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

nó có thể là vấn đề phạm vi do đó hãy chắc xoay như biến toàn cầu và gọi clearTimeout(rotate);

tham khảo clearTimeout() example

Answer 4

Nó có thể là một vấn đề Phạm vi nếu bạn không khai báo rotate bên ngoài.

Hãy thử điều này:

var rotate = 0; 
function loadThumb(thumb) { 

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

} 

Answer 5

Tôi không chắc chắn chính xác những gì bạn đang làm, bởi vì như xa như tôi có thể nhìn thấy bạn không gửi tất cả các mã, nhưng điều này có vẻ tốt hơn cho tôi:

function loadThumb(thumb) { 

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

} 

và sau đó:

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

Answer 6

Nếu bạn phải quản lý nhiều timeout, bạn có thể sử dụng một đối tượng trong phạm vi toàn cầu và một số phương pháp tùy chỉnh để tạo ra và gỡ bỏ timeout của bạn. Để truy cập các phương thức, bạn có thể đặt các cuộc gọi trong trình xử lý onclick của các liên kết của bạn (như trong ví dụ), hoặc sử dụng một thư viện như jQuery để liên kết chúng.

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

tôi cũng đã đăng một ví dụ về jsFiddle http://jsfiddle.net/AGpzs/