浅谈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工做者，一直在学习的路上，东西太多只有不断的练习和总结才能实现真正的自我提高，其实，写博客也是对本身的督促，本身要努力的坚持下去，同时也但愿本文对你有所帮助！函数