淺談setTimeout函數和setInterval函數

時間 2019-11-17

標籤淺談 settimeout 函數 setinterval 简体版

原文原文鏈接

前幾天學了js，看到了兩個很是有趣的函數，他們分別是setTimeout函數和setInterval函數，這兩個函數能使網頁呈現很是一些網頁中比較常見的效果，好比說圖片輪播，等一些很是好玩的效果。下面就來一塊兒來了解這兩個函數吧！javascript

一setTimeout函數和setInterval函數的語法以及應用html

1.setTimeout函數java

定義和用法:setTimeout()方法用於在指定的毫秒數後調用函數或計算表達式。　　

語法:setTimeout(code,millisec);

參數：

code （必需）：要調用的函數後要執行的 JavaScript 代碼串。　　

millisec（必需）：在執行代碼前需等待的毫秒數。　　

提示：

setTimeout() 只執行 code 一次。若是要屢次調用，請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。

返回值

一個能夠傳遞給 Window.clearTimeout() 從而取消對 code 的週期性執行的值。數組

既然setTimeout是一個定時器函數，那麼就有一個一個函數來清理定時器，那咱們就用到了clearTimeout函數。

clearTimeout（setTimeout（）返回的ID值）；

2.setInterval定義

setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。dom

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。ecmascript

語法

setInterval(code,millisec[,"lang"])；

參數code必需。要調用的函數或要執行的代碼串。

millisec必須。週期性執行或調用 code 之間的時間間隔，以毫秒計

返回值

一個能夠傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。函數

既然setTimeout是一個定時器函數，那麼就有一個一個函數來清理定時器，那咱們就用到了clearInterval()函數。

clearInterval()（setInterval（）返回的ID值）；

二.案例：

倒計時效果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>倒計時效果</title>
    <script type="text/ecmascript">
        //使用js方式實現倒計時效果
        var t1;
        window.onload = function () {
          
            //01定位到開始按鈕返回一個dom對象
            var btns = document.getElementById('btnStart');
            //02.給開始按鈕註冊單擊事件
            btns.onclick = function () {
                //執行ssetInerval函數第一個參數要定時執行的函數，第二個參數該函數每一個多少毫秒執行一次
                t1= setInterval(start, 1000);

            }
            //03定位到中止按鈕返回一個dom對象
            var btnst = document.getElementById('btnStop');
            btnst.onclick = function () {
               clearInterval(t1);
            }
        }
       //要隔1秒執行的函數
        function start() {
            //01.獲取div中的文本賦值給一個變量
            var divdom = document.getElementById('msg');
            var divnum = divdom.innerText;
            //判斷divnum的值是否爲0
            if (divnum > 0) {
                divnum--;
                //把減過的值從新賦值給divnum
                divdom.innerText = divnum;
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btnStart" value="開始"  />
    <input type="button" id="btnStop"  value="中止" /><br />
    <div id="msg">10</div>

</body>
</html>

背景圖片切換：ui

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        var count = 1;//定義初始變量默認爲第一張圖片
        window.onload = function () {
           //使用定時器函數每隔一秒定義執行一次show函數
            setInterval(show,1000);
        }
        //要執行的函數
        function show() {
            //若是圖片到達最後一張（5張），就將下一張顯示的圖片改成第一張，若是沒有到達最後一張就將顯示下一張圖片
            if (count > 5) {
                count = 1;
            }
            else {
                count++;
            }
            //獲取id爲myimg的dom對象
            var dom = document.getElementById("myimg");
            //改變img標籤的src屬性指向，改變圖片
            dom.src = "image/"+count+".jpg"
        }

    </script>
</head>
<body>
    <img src="image/1.jpg" alt="Alternate Text" width="200px" height="200px" id="myimg" />
</body>
</html>

點名器spa

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        //定義一個數組保存該點名器中的基本數據
        var data = ['張三', '李四', '王二', '小陳', '小張'];
        var i = 0;//聲明一個初始變量默認讓第一我的顯示在頁面上
        var t1;
        window.onload = function () {
            //02.獲取開始點名按鈕的dom對象給該對象註冊單擊事件
            var dom = document.getElementById("mybtn");
            dom.onclick = function () {
                //使用setInterval函數隔500毫秒調用一次result函數
                t1 = setInterval(start, 500);
                //該方法隔6秒他只調用一次
                setTimeout(stop,6000);
            }
            //定義一個匿名函數把他賦值給一個變量result
             var start= function() {
                //03獲取h1標籤對象，給h1標籤的文本賦值
                var domh = document.getElementById("myh1");
                domh.innerText = data[i % data.length];//替換已存在，元素值
                i++;
             }
            //調用匿名函數
             start();
             var stop = function () {
                 //清除定時器
                 clearInterval(t1);
                 //彈出提示框點到的同窗請做答
                 alert("請" + document.getElementById("myh1").innerText+"同窗做答");
             }
           
        }
</script>
</head>
<body>
    <h1 id="myh1"></h1>
<button id="mybtn"> 開始點名</button>

</body>

</html>

經過上面的幾個案例，我相信你們一點對這兩個函數應該不陌生了。code

相關標籤/搜索

每日一句

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