HTML——js设置计时器和清除计时器的方法

杨不旧

已于 2022-02-19 14:30:59 修改

阅读量1.1w

点赞数 6

分类专栏： JavaScript 文章标签： javascript html 前端

于 2021-12-13 19:12:12 首次发布

本文链接：https://blog.csdn.net/qq_45152044/article/details/121911747

版权

JavaScript 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

本文介绍了JavaScript中的setTimeout和setInterval计时器，包括它们的使用方式、区别及如何清除。setTimeout执行一次，而setInterval会周期性执行。清除计时器时，需要保存计时器的引用以便于使用clearTimeout或clearInterval。代码示例展示了声明变量存储计时器的必要性，以确保能够正确清除堆内存中的函数实例。

摘要由CSDN通过智能技术生成

js中的计时器

1、setTimeout计时器

setTimeout(要执行的方法，时间单位（毫秒）)

这里的执行方法通常是匿名函数（函数=方法）

setTimeout(function () {
   console.log('我是setTimeout计时器')
}, 2000)

setTimeout()意思：多少秒后执行函数，这里的意思就是：2秒后将在控制台打印“我是setTimeout计时器”

2、setInterval计时器

setInterval(要执行的方法，时间单位（毫秒）)

这里的执行方法通常是箭头函数

setInterval(() => {
         console.log('我是setInterval计时器')
}, 2000);

setInterval()意思：每隔多少秒执行函数，这里的意思就是：每隔2秒，将在控制台打印“我是setInterval计时器”

两者区别：setTimeout里的函数只会被执行一次，而setInterval里的函数会每隔多少秒执行一次。
需要注意：两者括号里面的第二个值，单位都是毫秒，1s=1000ms（1秒=1000毫秒），其他时间以此类推。

如何中止计时器（清除计时器）呢？

clearInterval()

clearInterval(清除哪一个计时器)

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<button onclick="myClick()">点击开始</button>
<button onclick="mystop()">点击停止</button>

<button onclick="myinterval()">点击开始interval</button>
<button onclick="mystopinterval()">点击停止interval</button>

<body>
  <script>
    // 计时器
    // setTimeout(要执行的方法，时间单位 毫秒)
    let time
    function myClick() {
      // setTimeout(myFun(), 3000)

      time = setTimeout(function () {
        console.log('我也会执行')
      }, 2000)
    }
    // function myFun() {
    //   return function () {
    //     console.log('我是返回的函数')
    //   }
    // }

    function mystop() {
      // clearTimeout(哪一个timeout)
      clearTimeout(time)
    }

	//清除setInterval计时器
    let num = 0
    function sum() {
      console.log(num++)
    }
    let myinter //声明一个变量的去装setInterval()
    function myinterval() {
      myinter = setInterval(() => {
        sum()
      }, 2000);
      //每隔2秒sum()函数会被执行	即每隔2秒会num++，执行的尽头通常是无止境的（不关闭浏览器，除了清除计时器）
    }
    function mystopinterval() {
      clearInterval(myinter)
    }
  </script>
</body>
</html>

为啥要声明一个变量去装setInterval() （下面的代码块1），而不直接（下面的代码块2）？

代码块1：

//清除setInterval计时器
let num = 0
function sum() {
  console.log(num++)
}
let myinter //声明一个变量的去装setInterval()
function myinterval() {
  myinter = setInterval(() => {
    sum()
  }, 2000);
  //每隔2秒sum()函数会被执行	即每隔2秒会num++，执行的尽头通常是无止境的（不关闭浏览器，除了清除计时器）
}
function mystopinterval() {
  clearInterval(myinter)
}

代码块2：

//清除setInterval计时器
let num = 0
function sum() {
  console.log(num++)
}
function myinterval() {
  setInterval(() => {
    sum()
  }, 2000);
  //每隔2秒sum()函数会被执行	即每隔2秒会num++，执行的尽头通常是无止境的（不关闭浏览器，除了清除计时器）
}
function mystopinterval() {
  clearInterval( setInterval(() => { sum()}, 2000);)
}

函数是引用数据类型，引用数据类型在栈内存里（用于存放地址，用的时候去取），而实际函数体是在堆内存里，就是实际存放的东西。
而代码块2只是清除了栈内存里的，而没有清除堆内存里的
所以需要一个变量去装计时器的东西，清除时候只需在clearInterval()这个括号里写这个变量就可以清除掉了。

纸上来得终觉浅，绝知此事要躬行，自己试一试吧。