淺談JS之setTimeout與setInterval

時間 2020-03-12

標籤淺談 settimeout setinterval 欄目 JavaScript 简体版

原文原文鏈接

概念

setTimeout與clearTimeout，以及setInterval與clearInterval均屬於Window對象方法。html

方法	描述
setTimeout	在指定的毫秒數後調用函數或計算表達式。
clearTimeout	取消由 setInterval() 設置的 timeout。取消由 setTimeout() 方法設置的 timeout。
setInterval	按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval	取消由 setInterval() 設置的 timeout。

具體語法

setTimeout

setTimeout(code, milliseconds)
setTimeout(function, milliseconds, param1, param2, ...)

參數	描述
code/function	必需。要調用一個代碼串，也能夠是一個函數。
milliseconds	可選。執行或調用 code/function 須要等待的時間，以毫秒計。默認爲 0。
param1, param2, ...	可選。傳給執行函數的其餘參數（IE9 及其更早版本不支持該參數）。

返回值:	返回一個 ID（數字），能夠將這個ID傳遞給 clearTimeout() 來取消執行。

setInterval

setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)

參數	描述
code/function	必需。要調用一個代碼串，也能夠是一個函數。
milliseconds	必須。週期性執行或調用 code/function 之間的時間間隔，以毫秒計。
param1, param2, ...	可選。傳給執行函數的其餘參數（IE9 及其更早版本不支持該參數）。

返回值:	返回一個 ID（數字），能夠將這個ID傳遞給clearInterval()，clearTimeout() 以取消執行。

實例

實例簡單描述：該實例是經過Vue實現的，具體操做要求是單擊【開始遊戲】按鈕3秒鐘後執行走馬燈效果，單擊【結束遊戲】按鈕中止走馬燈效果，具體代碼以下：vue

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>走馬燈效果</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="開始遊戲" @click="startGame">
    <input type="button" value="結束遊戲" @click="stopGame">
    <h1>{{ msg }}</h1>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '請點擊開始遊戲！',
        intervalId: null
      },
      methods: {
        startGame() {
          this.msg = '敵軍還有3秒到達戰場……';
          setTimeout(() => {
            this.msg = "兄弟們衝啊~~~~~~";
            this.intervalId = setInterval(() => {
              var start = this.msg.substring(0, 1);
              var end = this.msg.substring(1);
              this.msg = end + start;
            }, 400)
          }, 3000)
        },
        stopGame() {
          clearInterval(this.intervalId);
          this.intervalId = null;
          this.msg = "遊戲結束！請點擊從新開始！"
        }
      },
    })
  </script>
</body>

</html>

其中，用到了箭頭函數，箭頭函數表達式沒有本身的this,arguments,super或new.target，因此能夠在方法內部直接訪問外邊的this。app

總結

做爲一個IT工做者，一直在學習的路上，東西太多隻有不斷的練習和總結才能實現真正的自我提高，其實，寫博客也是對本身的督促，本身要努力的堅持下去，同時也但願本文對你有所幫助！函數

相關標籤/搜索

每日一句

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