2010-01-25 48 views
63

Tôi cần thực thi một đoạn mã JavaScript cho biết, mỗi 2000 mili giây.Hẹn giờ vòng lặp trong JavaScript

setTimeout('moveItem()',2000) 

Ở trên sẽ thực hiện chức năng sau 2000 mili giây, nhưng sẽ không thực hiện lại.

Vì vậy, bên trong chức năng moveItem của tôi, tôi có:

function moveItem() { 
    jQuery(".stripTransmitter ul li a").trigger('click'); 
    setInterval('moverItem()',2000); 
} 

này không làm việc vì tôi muốn thực hiện cò bấm jQuery đoạn mã mỗi khoảng thời gian năm 2000 mili giây, nhưng ngay bây giờ nó đang được gọi là tất cả các thời gian và tập lệnh cần phải bị gián đoạn. Bên cạnh đó, tôi cảm thấy đây là mã hóa chất lượng rất tệ ... Làm thế nào các bạn có thể giải quyết vấn đề này?

+0

khi kịch bản phải bị gián đoạn? – Natrium

+1

Xin chào, tôi sẽ không bao giờ làm gián đoạn nó. –

Trả lời

175

Lưu ý rằng setTimeoutsetInterval là chức năng rất khác nhau:

  • setTimeout sẽ thực thi mã lần, sau thời gian chờ.
  • setInterval sẽ thực thi mã mãi mãi, trong khoảng thời gian chờ được cung cấp.

Cả hai chức năng đều trả về ID bộ hẹn giờ mà bạn có thể sử dụng để hủy bỏ thời gian chờ. Tất cả những gì bạn phải làm là lưu trữ giá trị đó trong một biến và sử dụng nó làm đối số cho clearTimeout(tid) hoặc clearInterval(tid) tương ứng.

Vì vậy, tùy thuộc vào những gì bạn muốn làm, bạn có hai lựa chọn hợp lệ:

// set timeout 
var tid = setTimeout(mycode, 2000); 
function mycode() { 
    // do some stuff... 
    tid = setTimeout(mycode, 2000); // repeat myself 
} 
function abortTimer() { // to be called when you want to stop the timer 
    clearTimeout(tid); 
} 

hoặc

// set interval 
var tid = setInterval(mycode, 2000); 
function mycode() { 
    // do some stuff... 
    // no need to recall the function (it's an interval, it'll loop forever) 
} 
function abortTimer() { // to be called when you want to stop the timer 
    clearInterval(tid); 
} 

Cả hai đều là những cách rất phổ biến để đạt được như vậy.

+0

Đi với cái đầu tiên. Thế tốt hơn rồi. Chỉ cần có chức năng thời gian chờ tạo ra một cuộc gọi thời gian chờ mới cho chính nó. – a432511

+0

Này, Miguel, cảm ơn, đã giải quyết được vấn đề, và nó thật đơn giản, tôi cảm thấy vô lý ... –

+2

Bạn làm cho tôi hiểu rõ ràng giữa 'setTimeout' và' setInterval ', Cảm ơn @Miguel Ventura –

6
setInterval(moveItem, 2000); 

các cách để thực hiện chức năng moveItem mỗi 2 giây. Vấn đề chính trong mã của bạn là bạn đang gọi số setInterval bên trong, chứ không phải bên ngoài, gọi lại. Nếu tôi hiểu những gì bạn đang cố gắng để làm, bạn có thể sử dụng này:

function moveItem() { 
    jQuery('.stripTransmitter ul li a').trigger('click'); 
} 

setInterval(moveItem, 2000); 

NB: Không vượt qua chuỗi để setTimeout hoặc setInterval - Cách tốt nhất là vượt qua một chức năng ẩn danh hoặc một định chức năng (như tôi đã làm ở trên). Ngoài ra, hãy cẩn thận để không trộn các dấu nháy đơn và kép. Chọn một và gắn bó với nó.

-3

Bạn nên thử một cái gì đó như thế này:

function update(){ 
    i++; 
    document.getElementById('tekst').innerHTML = i; 
    setInterval(update(),1000); 
    } 

Điều này có nghĩa rằng bạn phải tạo một hàm mà bạn làm những thứ bạn cần phải làm, và đảm bảo nó sẽ tự gọi chính nó với khoảng thời gian bạn muốn. Trong onload cơ thể bạn gọi hàm cho lần đầu tiên như thế này:

<body onload="update()"> 
+1

Mã bị hỏng. Bạn đang truyền 'undefined' đến setInterval và đệ quy gọi' update() 'mãi mãi mà không tạm dừng. (gợi ý: giá trị trả về của update() là những gì bạn đang chuyển đến setInterval ở đây) – slebetman

+1

-1 bạn tạo một khoảng lặp mới mỗi khi bạn gọi hàm này .. nó không đúng .. và có cùng một vấn đề mà OP đang hỏi giúp đỡ cho .. –

2

Nó nên là:

function moveItem() { 
    jQuery(".stripTransmitter ul li a").trigger('click'); 
} 
setInterval(moveItem,2000); 

setInterval(f, t) gọi là chức năng lập luận, f, một lần t mili giây.

0

Ở đây, chức năng Tự động lặp với mã html. Tôi hy vọng điều này có thể hữu ích cho ai đó.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
position: relative; 
background-color: #abc; 
width: 40px; 
height: 40px; 
float: left; 
margin: 5px; 
} 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<p><button id="go">Run »</button></p> 
<div class="block"></div> 
<script> 

function test() { 
$(".block").animate({left: "+=50", opacity: 1}, 500); 
    setTimeout(mycode, 2000); 
}; 
$("#go").click(function(){ 
test(); 
}); 
</script> 
</body> 
</html> 

Fiddle: DEMO

Các vấn đề liên quan