熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JavaScript定時器詳解及實例

2022-06-13   來源: JSP教程 
這篇文章詳細介紹了JavaScript定時器及實例有需要要的朋友可以參考一下  

　　JS裡設定延時
使用SetInterval和設定延時函數setTimeout 很類似setTimeout 運用在延遲一段時間再進行某項操作
setTimeout("function"time) 設置一個超時對象
setInterval("function"time) 設置一個超時對象
SetInterval為自動重復setTimeout不會重復
clearTimeout(對象) 清除已設置的setTimeout對象
clearInterval(對象) 清除已設置的setInterval對象
使用定時器實現JavaScript的延期執行或重復執行
window對象提供了兩個方法來實現定時器的效果分別是windowsetTimeout()和windowsetInterval其中前者可以使一段代碼在指定時間後運行而後者則可以使一段代碼每過指定時間就運行一次它們的原型如下
windowsetTimeout(expressionmilliseconds);
windowsetInterval(expressionmilliseconds);
其 中expression可以是用引號括起來的一段代碼也可以是一個函數名到了指定的時間系統便會自動調用該函數當使用函數名作為調用句柄時 不能帶有任何參數而使用字符串時則可以在其中寫入要傳遞的參數兩個方法的第二個參數是milliseconds表示延時或者重復執行的毫秒數下 面分別介紹兩種方法
．windowsetTimeout方法
該方法可以延時執行一個函數例如

復制代碼 代碼如下:
<script language="JavaScript" type="text/javascript">
<!
function hello(){
alert("hello");
}
windowsetTimeout(hello);
//>
</script>

　　
這段代碼將使得頁面打開秒鐘後顯示對話框“hello”其中最後一句也可以寫為

復制代碼 代碼如下:
windowsetTimeout("hello()");

　　
讀者可以體會它們的差別在windowsetInterval方法中也有這樣的性質
如果在延時期限到達之前取消延執行可以使用windowclearTimeout(timeoutId)方法該方法接收一個id表示一個定時器這個id是由setTimeout方法返回的例如

復制代碼 代碼如下:
<script language="JavaScript" type="text/javascript">
<!
function hello(){
      alert("hello");
}
var id=windowsetTimeout(hello);
documentonclick=function(){
     windowclearTimeout(id);
}
//>
</script>

　　
這樣如果要取消顯示只需單擊頁面任何一部分就執行了windowclearTimeout方法使得超時操作被取消
．windowsetInterval方法
該 方法使得一個函數每隔固定時間被調用一次是一個很常用的方法如果想要取消定時執行和clearTimeout方法類似可以調用 windowclearInterval方法clearInterval方法同樣接收一個setInterval方法返回的值作為參數例如

復制代碼 代碼如下:
//定義一個反復執行的調用
var id=windowsetInterval("somefunction");
//取消定時執行
windowclearInterval(id);

　　
上 面的代碼僅用於說明怎樣取消一個定時執行實際上在很多場合都需要用到setInterval方法下面將設計一個秒表來介紹setInterval 函數的用途該秒表將包括兩個按鈕和一個用於顯示時間的文本框當單擊開始按鈕時開始計時最小單位為秒此時再次單擊按鈕則停止計時文本框顯 示經過的時間另外一個按鈕用於將當前時間清零其實現代碼如下

復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<body>
<form action="somepageasp">
<input type="text" value="" name="txt"/>
<input type="button" value="開始" name="btnStart"/>
<input type="button" value="重置" name="btnReset"/>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!
//獲取表單中的表單域
var txt=documentforms[]elements["txt"];
var btnStart=documentforms[]elements["btnStart"];
var btnReset=documentforms[]elements["btnReset"]
//定義定時器的id
var id;
//每毫秒該值增加
var seed=;
btnStartonclick=function(){
      //根據按鈕文本來判斷當前操作
      if(thisvalue=="開始"){
              //使按鈕文本變為停止
              thisvalue="停止";
              //使重置按鈕不可用
              btnResetdisabled=true;
              //設置定時器每s跳一次
              id=windowsetInterval(tip);
      }else{
              //使按鈕文本變為開始
              thisvalue="開始";
              //使重置按鈕可用
              btnResetdisabled=false;
              //取消定時
              windowclearInterval(id);
      }
}
//重置按鈕
btnResetonclick=function(){
     seed=;
}
//讓秒表跳一格
function tip(){
      seed++;
      txtvalue=seed/;
}
//>
</script>

　　
給定時器調用傳遞參數
無論是windowsetTimeout還是windowsetInterval在使用函數名作為調用句柄時都不能帶參數而在許多場合必須要帶參數這就需要想方法解決例如對於函數hello(_name)它用於針對用戶名顯示歡迎信息

復制代碼 代碼如下:
var userName="jack";
//根據用戶名顯示歡迎信息
function hello(_name){
      alert("hello"+_name);
}

　　
這時如果企圖使用以下語句來使hello函數延遲秒執行是不可行的

復制代碼 代碼如下:
windowsetTimeout(hello(userName));

　　
這將使hello函數立即執行並將返回值作為調用句柄傳遞給setTimeout函數其結果並不是程序需要的而使用字符串形式可以達到想要的結果

復制代碼 代碼如下:
windowsetTimeout("hello(userName)");

　　
這裡的字符串是一段JavaScript代碼其中的userName表示的是變量但這種寫法不夠直觀而且有些場合必須使用函數名下面用一個小技巧來實現帶參數函數的調用

復制代碼 代碼如下:
<script language="JavaScript" type="text/javascript">
<!
var userName="jack";
//根據用戶名顯示歡迎信息
function hello(_name){
       alert("hello"+_name);
}
//創建一個函數用於返回一個無參數函數
function _hello(_name){
       return function(){
             hello(_name);
       }
}
windowsetTimeout(_hello(userName));
//>
</script>

　　
這 裡定義了一個函數_hello用於接收一個參數並返回一個不帶參數的函數在這個函數內部使用了外部函數的參數從而對其調用不需要使用參數在 windowsetTimeout函數中使用_hello(userName)來返回一個不帶參數的函數句柄從而實現了參數傳遞的功能
window對象有兩個主要的定時方法分別是setTimeout 和 setInteval 他們的語法基本上相同但是完成的功能取有區別
setTimeout方法是定時程序也就是在什麼時間以後干什麼干完了就拉倒
setInterval方法則是表示間隔一定時間反復執行某操作
JS裡設定延時
使用SetInterval和設定延時函數setTimeout 很類似setTimeout 運用在延遲一段時間再進行某項操作
setTimeout("function"time) 設置一個超時對象
setInterval("function"time) 設置一個超時對象
SetInterval為自動重復setTimeout不會重復
clearTimeout(對象) 清除已設置的setTimeout對象
clearInterval(對象) 清除已設置的setInterval對象
        如果用setTimeout實現setInerval的功能就需要在執行的程序中再定時調用自己才行如果要清除計數器需要根據使用的方法不同調用不同的清除方法
例如

復制代碼 代碼如下:
tttt=setTimeout(northsnow());
clearTimeout(tttt);

　　
或者

復制代碼 代碼如下:
tttt=setInterval(northsnow());
clearInteval(tttt);

　　
舉一個例子

復制代碼 代碼如下:
<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick=startShow();>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
   var intvalue=;
   var timer=null;
   function startShow()
   {
      liujincaiinnerHTML=liujincaiinnerHTML + " " + (intvalue ++)toString();
      timer=windowsetTimeout("startShow()");
   }
   function stop()
   {
      windowclearTimeout(timer);
   }
</script>

　　
或者

復制代碼 代碼如下:

　　
<div id="liujincai"></div>
<input type="button" name="start" value="start" onclick=timer=windowsetInterval("startShow()");//startShow();>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
   var intvalue=;
   var timer=null;
   function startShow()
   {
      liujincaiinnerHTML=liujincaiinnerHTML + " " + (intvalue ++)toString();
   }
   function stop()
   {
      windowclearInterval(timer);
   }
</script>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20185.html
    《JavaScript定時器詳解及實例》本文是由JSP教程免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.