JavaScript定时器

最新推荐文章于 2025-04-13 23:23:46 发布

DingDing_Zhang

最新推荐文章于 2025-04-13 23:23:46 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/DingDing_Zhang/article/details/107146545

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

JavaScript 定时器

定时器

根据我们设定的时间，重复的做同一件事情，如果不清除，会一直执行下去

一、setTimeout( ) 延时定时器 / 炸弹定时器

作用：在你指定时间以后，执行一次就没有后续了
语法：
- setTimeout(函数, 时间)
  - 函数：会在时间达到的时候执行
  - 时间：是一个数字，单位是毫秒ms,设定的时间不能无限小,尽量不要小于20ms

	setTimeout(function () {
      // 这个函数会在 2000ms 以后执行
      console.log('我执行了')
      console.log(new Date())
    }, 2000)

二、setInterval( ) 间隔定时器

作用：每间隔指定时间以后，执行一次代码, 循环往复没有尽头
语法：
- setInterval(函数, 时间)
  - 函数：每间隔指定时间就执行一回
  - 时间：是一个数字，单位是毫秒ms,设定的时间不能无限小,尽量不要小于20ms

	setInterval(function () {
      // 这个函数每间隔 2000ms 就执行一次
      console.log('我执行了')
      console.log(new Date())
    }, 2000)

程序的同步和异步

一、同步执行代码（有顺序的）

顺序语句、循环语句、条件语句 …

二、异步执行代码（不分先后顺序，没有先后顺序）

定时器、延时器、onclick等事件、ajax …

三、代码读取顺序

遇到同步程序的时候直接执行（从上到下的顺序执行）
遇到异步程序，它会暂时存在异步池里面，等到所有同步程序执行完毕以后，再执行异步池里面的代码
异步池里面的程序时间短的会先执行

四、结论

当出现定时器的时候，先执行定时器外面的代码，后执行定时器里面的代码

	console.log('start')

    setTimeout(function () {
      // 这个函数会在 1000ms 以后执行
      console.log('定时器执行了')
    }, 1000)

    console.log('end')

	console.log('start')

    // 异步代码会在同步结束后再执行
    // 但是现在因为下面的死循环, 同步代码不会执行完毕
    // 这个异步代码永远不会执行出来
    setTimeout(function () {
      console.log('定时器执行了') // 会不会被打印出来
    }, 0)

    for (var i = 0; i < 2; i--) {}

定时器的返回值

不分定时器种类，只表示你是页面中的第几个定时器，是一个number类型
作用：将来用于关闭定时器使用的

 	// timer1 接收的就是 setTimeout 的返回值
    var timer1 = setTimeout(function () {
      console.log('setTimeout')
    }, 1000)

    // timer2 接收的就是 setInterval 的返回值
    var timer2 = setInterval(function () {
      console.log('setInterval')
    }, 1000)


    console.log(timer1) // 1
    console.log(timer2) // 2

关闭定时器

一、clearTimeout( )

作用：关闭定时器
语法：
- clearTimeout(你要关闭的定时器返回值)

二、clearInterval( )

作用：关闭定时器
语法：
- clearInterval(你要关闭的定时器返回值)

 	// 1. 开启一个定时器
    var timer1 = setTimeout(function () {
      console.log('setTimeout 执行了')
    }, 3000)

    var timer2 = setInterval(function () {
      console.log('setInterval 执行了')
    }, 1000)

    // 关闭定时器，为了方便看到效果, 依托再点击事件上
    btn.onclick = function () {
      // 关闭 定时器
      clearTimeout(timer1)

      // 关闭第二个定时器
      clearInterval(timer2)
    }

三、特别说明

关闭定时器是不分种类的，可以互相关闭
claerTimeout 能关闭 setTimeout 也能关闭 setInterval
clearInterval 能关闭 setTimeout 也能关闭 setInterval

	// 1. 开启一个定时器
	var timer = setInterval(function () {
      console.log('setInterval 执行了')
    }, 1000)
    
    // 关闭定时器，为了方便看到效果, 依托再点击事件上
    btn.onclick = function () {
      // 关闭 定时器
      clearTimeout(timer)
    }

流氓广告

<!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>Document</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      border: 1px solid #333;
      position: fixed;
      bottom: 0;
      right: 0;
      background-color: skyblue;
    }
    #btn{
      width: 40px;
      height: 40px;
      font-size: 30px;
      position: fixed;
      right: 0;
    }
  </style>
</head>
<body>
  <div id="box">
    <button id="btn">X</button>
  </div>
  <script>
    /*
      流氓广告小案例

      思路
      1. 给 button 按钮绑定一个点击事件
      2. 再点击的时候让 div 盒子隐藏
      3. 再点击的时候设置一个定时器, 固定时间以后, 再让这个 div 显示出来
    */

    // 1. 给 button 按钮绑定一个点击事件
    btn.onclick = function () {
      // 会在点击这个关闭按钮的时候触发

      // 2. 让 div 盒子隐藏
      box.style.display = 'none'

      // 3. 开启一个定时器, 在固定时间以后再让这个广告出来
      // 每次关闭的时候, 都会设置一个延时定时器
      setTimeout(function () {
        // 定时器里面让 div 再显示出来
        box.style.display = 'block'
        console.log('定时器执行了')
      }, 1000)
    }
  </script>
</body>
</html>