各种定时器总结
一次性定時器
用以指定在一段特定的時間后執行某段程序。
setTimeout():
格式:[定時器對象名=] setTimeout(“<表達式>”,毫秒)
功能:執行<表達式>一次。
例子:
代碼如下:
<!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>?
周期性定時器
以一定的時間為間隔,不斷地重復執行表達式。
setInterval():
格式:[定時器對象名=] 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);//立刻執行?
一、setTimeout
setTimeout(function(){//要執行的代碼 },200);?
指隔200ms后,定時器代碼被添加到隊列中,等待JavaScript進程空閑后,代碼才執行
二、setInterval
1、上面代碼是指每隔200ms就創建一個執行代碼的定時器
2、當使用setInterval時,僅當(在隊列中)沒有該定時器的任何其他代碼實例時,才將定時器代碼添加到隊列中,引用JavaScript高級程序設計第二版書中語句(即:當前一個定時器代碼執行時,緊跟后面的第一個定時器代碼將添加到隊列中,等待執行,再后面的定時器代碼不會添加到隊列中)
用setInterval來執行反復的行為的時候會遇到一個問題:
當定時器代碼執行時間(假如需要600ms才執行完)超過指定間隔(這里是200ms),那么某些定時器代碼就會被跳過(即后面的定時器代碼不會被添加到隊列中),前一個定時器代碼執行完畢后,隊列中的定時器代碼立刻執行,各定時器之間的代碼執行沒有間隔。這時,需要使用鏈式setTimeout。
這樣做的好處是:前一個定時器要執行的代碼執行完且等待200ms后,才創建一個新的定時器,并把定時器代碼添加到隊列中執行即:不會出現定時器代碼被跳過的情況;定時器之間的代碼執行可以有間隔(根據自己設置)。
setTimeout(function(){//要執行的代碼 setTimeout(arguments.callee,2000);},2000);setInterval(function(){//要執行的代碼 },200);?
轉載于:https://www.cnblogs.com/yingleiming/p/7611610.html
總結
- 上一篇: iOS quartzCore学习之UIB
- 下一篇: FreeCodeCamp学习之数组查找去