各類定時器總結

時間 2020-07-07

標籤各類定時器總結简体版

原文原文鏈接

一次性定時器javascript

　　用以指定在一段特定的時間後執行某段程序。css

　　setTimeout()：html

　　格式：[定時器對象名=] setTimeout(「<表達式>」，毫秒)java

　　功能：執行<表達式>一次。express

　　例子：框架

代碼以下:函數

<!DOCTYPE html>
<html>
  <head>
    <title>timer1.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
     function count()
     {
         setTimeout("alert('執行成功！')",7000);
     }
    </script>
  </head>
  <body>
    <input type="button" value="點擊我啊" onclick="count();">
  </body>
</html>

週期性定時器性能

　　以必定的時間爲間隔，不斷地重複執行表達式。ui

　　setInterval()：this

　　格式：[定時器對象名=] setInterval(「<表達式>」，毫秒)

　　功能：重複執行<表達式>，直至窗口、框架被關閉或執行clearInterval。

　　clearInterval()：

　　格式：clearInterval(定時器對象名)　　

　　功能：終止定時器

　　例子：

代碼以下:

<!DOCTYPE html>
<html>
  <head>
    <title>timer2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
    var sec = 0;
    var timer = setInterval("count();",1000);//頁面加載的時候即開始計時
     function count()
     {
        document.getElementById("num").innerHTML = sec++;
     }
     function stopCount()
     {
         clearInterval(timer);//中止定時器的運行
     }
    </script>
  </head>
  <body>
    <font color="red" id="num">0</font>
    <input type="button" value="中止" onclick="stopCount();">
  </body>
</html>

使用定時器實現JavaScript的延期執行或重複執行 window對象提供了兩個方法來實現定時器的效果，分別是

window.setTimeout()和window.setInterval。其中前者可使一段代碼在指定時間後運行；然後者則可使一段代碼每過指定時間就運行一次。它們的原型以下： window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); 其中expression能夠是字符串，也能夠是函數名。是字符串的時候能夠帶參數，函數名不能帶參數，若是帶上參數就直接執行函數了，不會延時。

function hello (){

console.log('I am dada'); //alert('I am ' + name);

//setTimeout(arguments.callee,2000);

} setTimeout(hello,5000);//5秒後執行 setTimeout('hello()',3000);//3秒後執行

setTimeout(hello(),8000);//馬上執行

第一種狀況是函數名，可是帶不了參數

第二種狀況是字符串，可執行的js代碼，能夠帶參數，可是性能上比函數名差

第三種是調用函數，直接執行

因此若是想要穿參數，可是又不想經過字符串的形式調用，能夠本身來寫一個方法：

function _hello(_name){

return function(){

hello2(_name);

}

}

setTimeout(_hello(name),7000);//馬上執行

1、setTimeout

setTimeout(function(){

//要執行的代碼

},200);

指隔200ms後,定時器代碼被添加到隊列中,等待JavaScript進程空閒後,代碼才執行

2、setInterval

一、上面代碼是指每隔200ms就建立一個執行代碼的定時器
二、當使用setInterval時,僅當(在隊列中)沒有該定時器的任何其餘代碼實例時,纔將定時器代碼添加到隊列中,引用JavaScript高級程序設計第二版書中語句(即：當前一個定時器代碼執行時,緊跟後面的第一個定時器代碼將添加到隊列中,等待執行,再後面的定時器代碼不會添加到隊列中)

用setInterval來執行反覆的行爲的時候會遇到一個問題：

當定時器代碼執行時間(假如須要600ms才執行完)超過指定間隔(這裏是200ms),那麼某些定時器代碼就會被跳過(即後面的定時器代碼不會被添加到隊列中),前一個定時器代碼執行完畢後,隊列中的定時器代碼馬上執行,各定時器之間的代碼執行沒有間隔。這時，須要使用鏈式setTimeout。

這樣作的好處是:前一個定時器要執行的代碼執行完且等待200ms後,才建立一個新的定時器,並把定時器代碼添加到隊列中執行即：不會出現定時器代碼被跳過的狀況;定時器之間的代碼執行能夠有間隔(根據本身設置)。

setTimeout(function(){

//要執行的代碼

setTimeout(arguments.callee,2000);

},2000);

setInterval(function(){

//要執行的代碼

},200);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。