快捷導(dǎo)航

深入理解setTimeout函數(shù)和setInterval函數(shù)

更新時(shí)間：2016年05月20日 16:18:38 投稿：jingxian

下面小編就為大家?guī)?lái)一篇深入理解setTimeout函數(shù)和setInterval函數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前幾天學(xué)了js，看到了兩個(gè)非常有趣的函數(shù)，他們分別是setTimeout函數(shù)和setInterval函數(shù)，這兩個(gè)函數(shù)能使網(wǎng)頁(yè)呈現(xiàn)非常一些網(wǎng)頁(yè)中比較常見(jiàn)的效果，比如說(shuō)圖片輪播，等一些非常好玩的效果。下面就來(lái)一起來(lái)了解這兩個(gè)函數(shù)吧！

一setTimeout函數(shù)和setInterval函數(shù)的語(yǔ)法以及應(yīng)用

1.setTimeout函數(shù)

定義和用法:setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。　　

語(yǔ)法:setTimeout(code,millisec);

參數(shù)：

code （必需）：要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。　　

millisec（必需）：在執(zhí)行代碼前需等待的毫秒數(shù)?！　?/p>

提示：

setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請(qǐng)使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。

返回值

一個(gè)可以傳遞給 Window.clearTimeout() 從而取消對(duì) code 的周期性執(zhí)行的值。

既然setTimeout是一個(gè)定時(shí)器函數(shù)，那么就有一個(gè)一個(gè)函數(shù)來(lái)清理定時(shí)器，那我們就用到了clearTimeout函數(shù)。

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

2.setInterval定義

setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。

setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。

語(yǔ)法

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

參數(shù)code必需。要調(diào)用的函數(shù)或要執(zhí)行的代碼串。

millisec必須。周期性執(zhí)行或調(diào)用 code 之間的時(shí)間間隔，以毫秒計(jì)

返回值

一個(gè)可以傳遞給 Window.clearInterval() 從而取消對(duì) code 的周期性執(zhí)行的值。

既然setTimeout是一個(gè)定時(shí)器函數(shù)，那么就有一個(gè)一個(gè)函數(shù)來(lái)清理定時(shí)器，那我們就用到了clearInterval()函數(shù)。

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

二.案例：

倒計(jì)時(shí)效果

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

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

</body>
</html>

背景圖片切換：

<!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;//定義初始變量默認(rèn)為第一張圖片
    window.onload = function () {
      //使用定時(shí)器函數(shù)每隔一秒定義執(zhí)行一次show函數(shù)
      setInterval(show,1000);
    }
    //要執(zhí)行的函數(shù)
    function show() {
      //如果圖片到達(dá)最后一張（5張），就將下一張顯示的圖片改為第一張，如果沒(méi)有到達(dá)最后一張就將顯示下一張圖片
      if (count > 5) {
        count = 1;
      }
      else {
        count++;
      }
      //獲取id為myimg的dom對(duì)象
      var dom = document.getElementById("myimg");
      //改變img標(biāo)簽的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>

點(diǎn)名器

<!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">
    //定義一個(gè)數(shù)組保存該點(diǎn)名器中的基本數(shù)據(jù)
    var data = ['張三', '李四', '王二', '小陳', '小張'];
    var i = 0;//聲明一個(gè)初始變量默認(rèn)讓第一個(gè)人顯示在頁(yè)面上
    var t1;
    window.onload = function () {
      //02.獲取開(kāi)始點(diǎn)名按鈕的dom對(duì)象給該對(duì)象注冊(cè)單擊事件
      var dom = document.getElementById("mybtn");
      dom.onclick = function () {
        //使用setInterval函數(shù)隔500毫秒調(diào)用一次result函數(shù)
        t1 = setInterval(start, 500);
        //該方法隔6秒他只調(diào)用一次
        setTimeout(stop,6000);
      }
      //定義一個(gè)匿名函數(shù)把他賦值給一個(gè)變量result
       var start= function() {
        //03獲取h1標(biāo)簽對(duì)象，給h1標(biāo)簽的文本賦值
        var domh = document.getElementById("myh1");
        domh.innerText = data[i % data.length];//替換已存在，元素值
        i++;
       }
      //調(diào)用匿名函數(shù)
       start();
       var stop = function () {
         //清除定時(shí)器
         clearInterval(t1);
         //彈出提示框點(diǎn)到的同學(xué)請(qǐng)作答
         alert("請(qǐng)" + document.getElementById("myh1").innerText+"同學(xué)作答");
       }
      
    }
</script>
</head>
<body>
  <h1 id="myh1"></h1>
<button id="mybtn"> 開(kāi)始點(diǎn)名</button>

</body>

</html>

通過(guò)上面的幾個(gè)案例，我相信大家一點(diǎn)對(duì)這兩個(gè)函數(shù)應(yīng)該不陌生了。

以上這篇深入理解setTimeout函數(shù)和setInterval函數(shù)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: