Javascript中setTimeOut和setInterval的定時器用法,js定時器setinterval

來源:互聯網
上載者:User

Javascript中setTimeOut和setInterval的定時器用法,js定時器setinterval

Javascript的setTimeOut和setInterval函數應用非常廣泛,它們都用來處理延時和定時任務,比如開啟網頁一段時間後彈出一個登入框,頁面每隔一段時間發送非同步請求擷取最新資料等等。但它們的應用是有區別的。

setTimeout() 方法用於在指定的毫秒數後調用函數或計算運算式,而setInterval()則是在每隔指定的毫秒數迴圈調用函數或運算式,直到clearInterval把它清除。也就是說setTimeout()只執行一次,setInterval()可以執行多次。兩個函數的參數也相同,第一個參數是要執行的code或控制代碼,第二個是延遲的毫秒數。
setTimeOut用法
setTimeout函數的用法如下:

複製代碼 代碼如下:
var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]);
var timeoutID = window.setTimeout(code, [delay]);

timeoutID:定時器ID號,它可以在clearTimeout()函數中被用來清除定時器。
func:被執行的函數。
code:(替代的文法)一個被執行的代碼串。
delay:延遲的時間,單位毫秒。如果沒有指定,預設為0。

我們可以使用window.setTimeout或setTimeout,兩個寫法基本一樣,只不過window.setTimeout將setTimeout函數作為全域window對象的一個屬性來引用。

應用樣本:

複製代碼 代碼如下:
function timeout(){
    document.getElementById('res').innerHTML=Math.floor(Math.random()*100 + 1);
}
setTimeout("timeout()",5000);

代碼執行時,5秒後調用timeout()函數,點擊看示範。
setInterval用法
setInterval函數的參數及用法和setTimeout函數一樣,請參照上文的setTimeout函數的用法介紹。不同的是,setInterval每隔一定的時間執行當中的func或code代碼。
應用樣本:

複製代碼 代碼如下:
var tt = 10;
function timego(){
    tt--;
    document.getElementById("tt").innerHTML = tt;
    if(tt==0){ 
        window.location.href='/';
        return false;
    }
}
var timer = window.setInterval("timego()",1000);

函數timego()定義了頁面元素#tt顯示的內容,當tt等於0時,頁面定向到首頁。然後我們定義一個定時器timer,使用setInterval()每隔1秒調用一次timego()。這樣timego會執行10次,每次數字tt會減1,直到為0。那麼如果想停止定時器,可以使用以下代碼:

複製代碼 代碼如下:
window.clearInterval(timer); 

代碼執行時,10秒後頁面跳轉到首頁

其實setTimeout()也可以實現每隔一段時間重複執行某個函數,但我們還是簡單的區別使用setTimeOut和setInterval。另外javascript都是以單線程的方式運行於瀏覽器的javascript引擎中,實際應用中複雜的任務中需要排隊執行,這就可能導致定時器時間不準,這個問題在大型應用中需要考慮,本文不做深究。

以上所述就是本文的全部內容了,希望大家能夠喜歡。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.