天天看點

js中的計時器事件`setTimeout()` 和 `setInterval()`

js

中的計時器事件

在js中,通常會有一些事件,我們需要讓它

間隔一段時間

之後再發生,或者

每隔一段時間

發生一次,那就需要用到我們

js

中的

計時事件

計時事件

主要有兩種:

  • setTimeout()

    ---- 間隔一定的時間之後執行
  • setInterval()

    ----每間隔一定的時間執行一次(重複性執行)

setTimeout()

間隔一定的時間之後`執行指定的語句或函數。

例如:3s後跳轉到前一個頁面。

<script type="text/javascript">
    setTimeout(function(){
            window.history.back();
    },3000);
</script>
           

也可以采用調用函數的方式

function fn1(){
			console.log("你好");
		}
		setTimeout(fn1,3000);
           

需要注意的是,我們在上述代碼中調用函數時調用的整個函數體,而不是函數執行後的結果

fn1()

setInterval()

每隔一段時間

執行一次指定的語句或函數,是個重複性的操作。

執行個體1:每隔3s列印一次“hello”

<script type="text/javascript">
    setTimeout(function(){
           console.log("hello");
    },3000);
</script>
           

執行個體2:顯示目前時間,通過按鈕實作時間的停止,開始

<body>
    <h4 id="demo"></h4>
    <input type="button" onclick="startTimer()" value="開始">
    <input type="button" onclick="stopTimer()" value="停止">
</body>
           
<script type="text/javascript">
    var myVar;
    function startTimer(){ 
        /*setInterval() 間隔指定的毫秒數不停地執行指定的代碼*/
        myVar=setInterval(function(){myTimer()},1000);
        }
    function myTimer()/* 定義一個得到本地時間的函數*/
    {
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
    }
    function stopTimer()
    {/* clearInterval() 方法用于停止 setInterval() 方法執行的函數代碼*/
    clearInterval(myVar);
    }
    </script>
           

如何執行停止呢?

clearInterval() 方法用于停止 setInterval() 方法執行的函數代碼.

clearTimeout() 方法用于停止執行setTimeout()方法的函數代碼。

這裡注意myVar必須是一個全局變量。執行個體如下:

var myVar;
    function myFunction()
    {
    myVar=setTimeout(function(){alert("Hello")},3000);
    }

    function myStopFunction()
    {
    clearTimeout(myVar);
    }
           
js中的計時器事件`setTimeout()` 和 `setInterval()`