javascript 不停(setInterval)/延時(setTimeout)函數

時間 2020-10-06

標籤 javascript html java dom ide 函數動畫 spa 線程 htm 欄目 JavaScript 简体版

原文原文鏈接

1、
setTimeout(script,millisecond); 是從如今算起多少微秒後運行該代碼（只運行一次）

setInterval(script,millisecond); 是每隔多少微秒運行一次代碼

示例:
1.執行一次

< span id ="time" ></ span > 秒
< script type ="text/javascript" >
var i = 1 ;
var txt = document.getElementById( " time " );
function addT(i) {
txt.innerHTML = i;
}
setTimeout("addT(i++)",1000);
</ script >

2.複製執行

< span id ="time" > 3 </ span > 秒
< script type ="text/javascript" >
var i = 1 ;
var txt = document.getElementById( " time " );
function addT(i) {
txt.innerHTML = i;
}
setInterval( " addT(i++) " , 1000 );
</ script >

setTimeout也能夠作成重複執行

< span id ="time" ></ span > 秒
< script type ="text/javascript" >
var i = 1 ;
var txt = document.getElementById( " time " );
function addT(i) {
txt.innerHTML = i;
setTimeout( " addT(i++) " , 1000 );
}
addT(i);
</ script >

------------------------------------------------------------------------------------------------------------------

2、精解window.setTimeout()使用方式與參數傳遞問題

[setTimeout]
setTimeout(表達式,延時時間)
在執行時,是在載入後延遲指定時間後,去執行一次表達式,記住,次數是一次

用setTimeout實現的自動變化顯示隨機數的效果:
<html>
<head>
    <script>
      window.onload=sett;
      function sett()
      {
        document.body.innerHTML=Math.random();
        setTimeout("sett()",500);
      }
    </script>

  </head>
<body>
</body>
</html>

[setInterval]
setInterval(表達式,交互時間)
則不同,它從載入後,每隔指定的時間就執行一次表達式

用setInterval實現的自動變化顯示隨機數的效果:
<html>
<head>
    <script>
      function sett()
      {
        document.body.innerHTML=Math.random();
      }
      setInterval("sett();", 500);
    </script>
</head>
<body>
</body>
</html>

在使用JScript的時候，咱們有時須要間隔的執行一個方法，好比用來產生網頁UI動畫特效啥的。這時咱們經常會使用方法setInterval或 setTimeout，可是因爲這兩個方法是由腳本宿主模擬出來的Timer線程，在經過其調用咱們的方法是不能爲其傳遞參數。
    咱們經常使用的使用場景是：
    window.setTimeout("delayRun()", n);
    window.setInterval("intervalRun()", n);
    window.setTimeout(delayRun, n);
    window.setInterval(intervalRun, n);

    顯然強行代參數的調用： window.setTimeout("delayRun(param)", n);
    window.setInterval("intervalRun(param)", n);
    window.setTimeout(delayRun(param), n);
    window.setInterval(intervalRun(param), n);
    都是錯誤的，由於string literals形式的方法調用，param必須是全局變量(即window對象上的變量)才行；而 function pointer形式的調用，徹底錯誤了，這是把函數的返回值當成了setTimeout/setInterval函數的參數了，徹底不是咱們所望的事情      解決這個問題的辦法可使用匿名函數包裝的方式，在如下scenario中咱們這麼作：      function foo()      {           var param = 100;           window.setInterval( function(){ intervalRun(param); }, 888);      }      function interalRun(times)      {          // todo: depend on times parameter      }