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

時間 2020-06-22

標籤計時器事件 settimeout setinterval 欄目 JavaScript 简体版

原文原文鏈接

`js`中的計時器事件

在js中，一般會有一些事件，咱們須要讓它 間隔一段時間以後再發生，或者 每隔一段時間 發生一次，那就須要用到咱們js中的計時事件javascript

計時事件主要有兩種：html

setTimeout() ---- 間隔必定的時間以後執行
setInterval() ----每間隔必定的時間執行一次（重複性執行）

setTimeout()

間隔必定的時間以後`執行指定的語句或函數。例如：3s後跳轉到前一個頁面。java

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

也能夠採用調用函數的方式函數

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

須要注意的是，咱們在上述代碼中調用函數時調用的整個函數體，而不是函數執行後的結果fn1()spa

setInterval()

每隔一段時間執行一次指定的語句或函數，是個重複性的操做。實例1：每隔3s打印一次「hello」code

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

實例2：顯示當前時間，經過按鈕實現時間的中止，開始htm

<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);
    }