Lessons XI : [Javascript] Tìm hiểu về Time-out

[Javascript] Tìm hiểu về Time-out

Thứ ba, 09 Tháng 9 2008 12:43 Vua_Do_Hoa Hướng dẫn lập trình Ajax-JavaScript
Email In

Timeouts là một bản thời gian đếm ngược. Nó cho phép bạn thực thi một lệnh lập đi lập lại nhiều lần nhưng không chồng chất chúng lên nhau.
Timeout là một phần công việc quan trong và quen thuộc trong việc tạo ra một hay nhiều hiệu ứng đẹp trên trang Web

Giờ mình sẽ đi vào phần chính luôn.

Nếu  bạn muốn có 1 khách xem trang web của bạn trong 30s thì trang web sẽ tự động trả về một thông báo, bạn hãy làm giống như dưới này…

<script type="text/javascript">
<!--
setTimeout("alert('Thời gian 30 giây đã hết.');",30000);
// -->
</script>

Trình duyệt sẽ trả về kết quả như thế này sau 30s bạn vào trang Web…

Tiếp theo nhé:

Đây là cấu trúc chính của Timeout:

setTimeout ( "function or expression", delaytime );
cái delaytime sẽ có một giá trị là 1000 đơn vị thì = 1 giây. Như vậy bạn có thể đặt cho nó thời gian xuất hiện sớm hơn hay trẽ hơn tùy thuộc vào cái này.

Function or expression nghĩa là ở vị trí này ta có thể đặt một hàm số hay là một biểu thức đều được,
Bây giờ ta hãy thử xét một ví dụ nữa … (Cái này là tự mình cho ví dụ nên có thể hơi dở )

Dưới này là một ví dụ về việc gọi một function timingex() bằng cách nhấn cái button “Click me!”  .
Sau đó trình duyệt sẽ đếm 3 giây và trả về một bản thông báo “Ba giây đã qua gùi!”…

<script type="text/javascript">
<!--
function timingex( ){
setTimeout("alert(' Ba giây đã qua gùi!”.');",3000);
}
// -->
</script>

<form>
<input type="button" VALUE="Click me!" OnClick="timingex( )">
</form>
Như lúc nãy. Cũng hiện ra một bản như thế này.!!!

Giờ sẽ thêm 2 ví dụ nữa để các bạn cũng như mình hiểu cặng kẽ luôn.

<body>
<script type="text/javascript">
<!--
x=1
function counter( )
{

alert("Chào bạn lần "+x);
x+=1;
setTimeout("counter()",5000);

}
// -->
</script>

<form>
<input type="button" VALUE="Click me!" OnClick="counter( ) " />
</form>
Như vậy nếu bạn thực hiện như trên thì nó sẽ trả về liên tục như thế này. Mỗi 5 giây sẽ trả về 1 bản thông báo VD như 2 bản dưới.

Nó có thể hoạt động liên tục nếu bạn không tắt cái trình duyệt.

Thêm cái này nữa:

<script type="text/javascript">
<!--
x=0
function counter(form)
{
x+=1;
window.status = "Bạn đã nhấn vào nút được " +x+" giây rồi đó !" ;
setTimeout("counter()",1000);
}
// -->
</script>

<form>
<input type="button" VALUE="Click me!" OnClick="counter(this.form)" />
</form>
Khi bạn nhấn vào Click me thì dưới thanh Status Bar ( Thanh Trang thái) sẽ xuất hiện một dòng “Bạn đã nhấn nút được x giây rồi đó !”
Tùy từng mục đích mà bạn áp dụng cái trên như thế nào

VD:
Cái trên còn có thể dùng để đếm thời gian bạn ở trên trang web đươc bao lâu bằng cách bỏ nút button đi và thay thể body là

<body onload= “counter() ”>
Như thế này

<body onload="counter();">
<script type="text/javascript">
<!--
x=0
function counter()
{
x+=1;
window.status = "Bạn đã vào trang này được " +x+" giây rồi đó !" ;
setTimeout("counter()",1000);
}
// -->
</script>

</body>
Hãy thử nhé. Rất vui.
Chú ý:  Ngoài việc bạn làm như trên bạn có thể đặt một vài điều kiện để cho nội dung phong phú hơn
Bài viết của Vua_Do_Hoa
Theo http://htmlite.com/
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: