轉載---javascript 定時器總結

来源:http://www.cnblogs.com/yaohuimo/archive/2016/11/20/6082005.html
-Advertisement-
Play Games

轉載:http://www.jb51.net/article/40193.htm JS里設定延時: 使用SetInterval和設定延時函數setTimeout 很類似。setTimeout 運用在延遲一段時間,再進行某項操作。 setTimeout("function",time) 設置一個超時對 ...


轉載:http://www.jb51.net/article/40193.htm

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

1.window.setTimeout方法 
該方法可以延時執行一個函數,例如: 

<script language="JavaScript" type="text/javascript"> 
<!-- 
function hello(){ 
alert("hello"); 

window.setTimeout(hello,5000); 
//--> 
</script> 

這段代碼將使得頁面打開5秒鐘後顯示對話框“hello”。其中最後一句也可以寫為:window.setTimeout("hello()",5000); 

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

<script language="JavaScript" type="text/javascript"> 
<!-- 
function hello(){ 
      alert("hello"); 

var id=window.setTimeout(hello,5000); 
document.onclick=function(){ 
     window.clearTimeout(id); 

//--> 
</script>

這樣,如果要取消顯示,只需單擊頁面任何一部分,就執行了window.clearTimeout方法,使得超時操作被取消。 

 

2.window.setInterval方法 
該方法使得一個函數每隔固定時間被調用一次,是一個很常用的方法。如果想要取消定時執行,和clearTimeout方法類似,可以調用 window.clearInterval方法。clearInterval方法同樣接收一個setInterval方法返回的值作為參數。例如:

//定義一個反覆執行的調用 
var id=window.setInterval("somefunction",10000); 
//取消定時執行 
window.clearInterval(id); 

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
<form action="somepage.asp"> 
<input type="text" value="0" name="txt1"/> 
<input type="button" value="開始" name="btnStart"/> 
<input type="button" value="重置" name="btnReset"/> 
</form> 
</body> 
</html> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
//獲取表單中的表單域 
var txt=document.forms[0].elements["txt1"]; 
var btnStart=document.forms[0].elements["btnStart"]; 
var btnReset=document.forms[0].elements["btnReset"] 
//定義定時器的id 
var id; 
//每10毫秒該值增加1 
var seed=0; 
btnStart.onclick=function(){ 
      //根據按鈕文本來判斷當前操作 
      if(this.value=="開始"){ 
              //使按鈕文本變為停止 
              this.value="停止"; 
              //使重置按鈕不可用 
              btnReset.disabled=true; 
              //設置定時器,每0.01s跳一次 
              id=window.setInterval(tip,10); 
      }else{ 
              //使按鈕文本變為開始 
              this.value="開始"; 
              //使重置按鈕可用 
              btnReset.disabled=false; 
              //取消定時 
              window.clearInterval(id); 
      } 

//重置按鈕 
btnReset.onclick=function(){ 
     seed=0; 

//讓秒錶跳一格 
function tip(){ 
      seed++; 
      txt.value=seed/100; 

//--> 
</script>

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

var userName="jack"; 
//根據用戶名顯示歡迎信息 
function hello(_name){ 
      alert("hello,"+_name); 

這時,如果企圖使用以下語句來使hello函數延遲3秒執行是不可行的:window.setTimeout(hello(userName),3000); 

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

window.setTimeout("hello(userName)",3000); 

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

<script language="JavaScript" type="text/javascript"> 
<!-- 
var userName="jack"; 
//根據用戶名顯示歡迎信息 
function hello(_name){ 
       alert("hello,"+_name); 

//創建一個函數,用於返回一個無參數函數 
function _hello(_name){ 
       return function(){ 
             hello(_name); 
       } 

window.setTimeout(_hello(userName),3000); 
//--> 
</script> 

這裡定義了一個函數_hello,用於接收一個參數,並返回一個不帶參數的函數,在這個函數內部使用了外部函數的參數,從而對其調用,不需要使用參數。在 window.setTimeout函數中,使用_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()',1000); 
clearTimeout(tttt); 

 

tttt=setInterval('northsnow()',1000); 
clearInteval(tttt); 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、前言 現在越來越多的公司用git進行版本控制,不過git是預設是開源的,如果私有的話是需要付費的,如果不想付費自己可以搭建一個git伺服器用來版本控制。 二、伺服器端操作 1、安裝git 2、創建一個git用戶 3、創建登錄證書 在git用戶目錄下創建.ssh文件夾併在其下創建文件authori ...
  • 1. ASCII碼 1> ASCII碼不包括我們輸入法中的"特殊字元"和"數學字元"等,他們都屬於擴展ASCII 字元 2. GBK編碼 GBK實際上是ASCII的中文擴展編碼,其規則是: 1> 如果第一個位元組的大於127(0x7F, 0111 1111,即最高位為0),則表示從這個位元組開始的2個字... ...
  • 現在大家常用的桌面操作系統有:Windows、Mac OS、ubuntu,其中Mac OS 和 ubuntu上都會自帶python。這裡我們只介紹下Windows(我用的Win10)環境下的python2.x 和 python3.x 的安裝,以及python2.x 與 python3.x 共存時的配 ...
  • seL4之hello 2旅途 2016/11/19 13:15:38 回顧上周 seL4運行環境搭建. 完成 的運行. 補充上周 1.微內核與巨集內核有什麼不同? 微內核——用戶態提供OS服務,一般採用server client架構。代表:L4系列微內核 巨集內核——內核態提供OS服務,通過syscal ...
  • Hi,大家好!我是CrazyCatJack,你們可以叫我CCJ或者瘋貓。今天我給大家帶來的是u-boot的源代碼彙編段分析,以後還會給大家講解後續的C代碼,請持續關註哦^_^ 先簡單說一下u-boot,在嵌入式開發中,u-boot起著至關重要的作用:讀出嵌入式系統內核並啟動內核。因此非常有必要對u- ...
  • 本人菜鳥一枚,大學里憑興趣學了一點WP的皮毛,後來又幸運(或者不幸)的進了一家專註於Windows生態的公司做了一段時間的UWP。在博客園寫點自己遇到的東西,作為分享,也作為自己的備忘,如果有錯誤的地方,或者可以提升B格的地方,希望園子里的大神們不吝賜教。 初進公司時,公司要做支付相關的業務,需要和 ...
  • #! usr/bin/env python#!-*-conding:utf-8-*-#第一步:定義變數 name = 'python' passwd = 'password'#第二步:寫while迴圈 定義count=0#第三步:判斷count=3則列印print("Account Be Locke ...
  • 分散式系統關鍵點 分散式系統(distributed system)是建立在網路之上的軟體系統。正是因為軟體的特性,所以分散式系統具有高度的內聚性和透明性。因此,網路和分散式系統之間的區別更多的在於高層軟體(特別是操作系統),而不是硬體。內聚性是指每一個資料庫分佈節點高度自治,有本地的資料庫管理系統 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...