window定时器方法

  • 有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用”。
  • 目前有两种方式可以实现：
    • setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
    • setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。
  • 并且通常情况下有提供对应的取消方法：
    • clearTimeout：取消setTimeout的定时器；
    • clearInterval：取消setInterval的定时器；
  • 大多数运行环境都有内置的调度程序，并且提供了这些方法：
    • 目前来讲，所有浏览器以及 Node.js 都支持这两个方法；
    • 所以我们后续学习Node的时候，也可以在Node中使用它们；

setTimeout的使用

  • setTimeout的语法如下：image.png
    • func|code：想要执行的函数或代码字符串。
      • 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做；
    • delay：执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
    • arg1，arg2…：要传入被执行函数（或代码字符串）的参数列表；
  • clearTimeout方法：
    • setTimeout 在调用时会返回一个“定时器标识符”，我们可以使用它来取消执行。

setInterval的使用

  • setInterval 方法和 setTimeout 的语法相同：image.png
    • 所有参数的意义也是相同的；
    • 不过与 setTimeout 只执行一次不同，setInterval 是每间隔给定的时间周期性执行；
  • clearInterval方法：
    • setInterval也会返回一个“定时器标识符”，我们可以通过clearInterval来取消这个定时器。
  • 关于定时器还有一些宏任务相关的概念，我们会在JavaScript高级中讲解。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>
<body>

  <button class="out">取消setTimeout定时器</button>
  <button class="itv">取消setInterval定时器</button>
  
  <script>

    // 1.setTimeout
    function foo(name, age, height) {
      console.log("foo被调用----", name, age, height)
    }
    var timeoutID = setTimeout(foo, 3000, "why", 18, 1.88)

    var timeoutBtn = document.querySelector(".out")
    timeoutBtn.onclick = function() {
      // 取消调度
      clearTimeout(timeoutID)
    }

    // 2.setInterval
    // function bar() {
    //   console.log("bar被调用++++")
    // }

    // var itvID = setInterval(bar, 3000)

    // var itvBtn = document.querySelector(".itv")
    // itvBtn.onclick = function() {
    //   clearInterval(itvID)
    // }

  </script>

</body>
</html>

案例实战一 – 消息滚动切换

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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>
  <style>
    .tip-bar {
      display: inline-flex;
      align-items: center;
      height: 30px;
      background-color: rgba(0,0,0,.4);
      border-radius: 16px;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 5px;
    }
    span {
      font-size: 13px;
      color: white;
      margin-right: 8px;
    }
  </style>
</head>
<body>
  
  
  <div class="tip-bar">
    <img src="https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png" alt="">
    <span>183***138对这件商品感兴趣</span>
  </div>

  <script>
    // 1.从服务器拿到数据ajax/fetch请求
    let tipList = [
      {
        icon: 'https://bfs.biyao.com/group1/M01/A6/97/rBACYWBCHqyAFH5tAAANZXX5Eww646.png',
        title: 'coderwhy对这件商品感兴趣'
      },
      {
        icon: 'https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png',
        title: '123***814对这件商品感兴趣'
      },
      {
        icon: 'https://bfs.biyao.com/group1/M00/7F/4E/rBACYV16HseAP-PnAAAW9bbVoKE463.png',
        title: '刘军对这件商品感兴趣'
      }
    ]

    // 2.动态的切换数据
    // 2.1.获取元素
    var tipBar = document.querySelector(".tip-bar")
    var imgEl = tipBar.querySelector("img")
    var spanEl = tipBar.querySelector("span")

    // 2.2.3s切换一次数据
    var currentIndex = 0 // 记录当前展示到的索引位置
    setInterval(function() {
      // 1> 根据索引获取item
      var tipItem = tipList[currentIndex]

      // 2> 给DOM设置内容
      imgEl.src = tipItem.icon
      spanEl.textContent = tipItem.title
      
      // 3> 重新计算索引
      currentIndex++
      if (currentIndex === tipList.length) {
        currentIndex = 0
      }
    }, 3000)

    // 随机
    // Math.floor(Math.random() * tipList.length)

  </script>

</body>
</html>

案例实战二 – 关闭头部消息

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!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>

  <style>
    .top-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 45px;
      width: 375px;
      background-color: black;
      /* 关键 */
      overflow: hidden;
      transition: all .5s ease-out;
    }

    .delete {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 30px;
      cursor: pointer;
    }

    .delete img {
      height: 10px;
      width: 10px;
    }

    .logo {
      height: 30px;
      width: 30px;
      margin-left: 3px;
      margin-right: 30px;
      cursor: pointer;
    }

    span {
      color: white;
      font-size: 14px;
      flex: 1;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .btn {
      width: 94px;
      height: 100%;
      line-height: 45px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      background-color: #F63515;
    }
  </style>
</head>

<body>

  <div class="top-bar">
    <div class="delete">
      <img src="./img/delete.png" alt="">
    </div>
    <img class="logo" src="./img/logo.png" alt="">
    <span>打开京东App,购物更轻松</span>
    <div class="btn">立即打开</div>
  </div>

  <script>
    // 1.获取元素
    var topBar = document.querySelector(".top-bar")
    var deleteEl = topBar.querySelector(".delete")

    // 2.监听delete的点击
    deleteEl.onclick = function () {
      topBar.style.height = 0
      // setTimeout(function() {
      //   topBar.remove()
      // }, 300)
    }

    // 3.监听过渡动画结束
    topBar.ontransitionend = function () {
      topBar.remove()
    }

  </script>

</body>

</html>

案例实战三 – 侧边栏展示

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!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>
  <style>
    .tool-bar {
      position: fixed;
      top: 30%;
      right: 0;

      display: flex;
      flex-direction: column;
      align-items: center;

      width: 35px;
    }

    .item {
      position: relative;
      width: 35px;
      height: 35px;
      margin-bottom: 1px;
      
      background-color: #7a6e6e;
      border-radius: 3px 0 0 3px;
    }

    .icon {
      display: inline-block;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background-image: url(./img/toolbars.png);
    }

    /* .icon01 {
      background-position: -48px 0;
    }
    .icon02 {
      background-position: -48px -50px;
    }
    .icon03 {
      background-position: -48px -100px;
    }
    .icon04 {
      background-position: -48px -150px;
    } */

    .name {
      position: absolute;
      z-index: -1;
      right: 35px;
      /* left: -62px; */
      top: 0;
      
      width: 0;
      height: 35px;
      line-height: 35px;

      color: #fff;
      text-align: center;
      font-size: 12px;
      background-color: #7a6e6e;
      cursor: pointer;

      border-radius: 3px 0 0 3px;
      transition: width .2s ease;
    }

    .item:hover,
    .item:hover .name {
      background-color: #cd1926;
    }
  </style>
</head>
<body>
  
  <div class="tool-bar">
    <div class="item">
      <i class="icon icon01"></i>
      <div class="name">购物车</div>
    </div>
    <div class="item">
      <i class="icon icon02"></i>
      <div class="name">收藏</div>
    </div>
    <div class="item">
      <i class="icon icon03"></i>
      <div class="name">限时活动</div>
    </div>
    <div class="item">
      <i class="icon icon04"></i>
      <div class="name">大礼包</div>
    </div>
  </div>

  <script>
    // 1.动态给icon设置backgroundPosition
    var iconEls = document.querySelectorAll(".icon")
    for (var i = 0; i < iconEls.length; i++) {
      var iconEl = iconEls[i]
      iconEl.style.backgroundPosition = `-48px -${50*i}px`
    }

    // 2.实现鼠标进入动画
    // 方案一: mouseenter(不能使用事件委托)
    var itemEls = document.querySelectorAll(".item")
    for (var itemEl of itemEls) {
      itemEl.onmouseenter = function() {
        var nameEl = this.children[1]
        nameEl.style.width = "62px"
      }
      itemEl.onmouseleave = function() {
        var nameEl = this.children[1]
        nameEl.style.width = "0"
      }
    }

    // 方案二: mouseover(使用事件委托)
    // var toolbarEl = document.querySelector(".tool-bar")
    // toolbarEl.onmouseover = function(event) {
    //   handleMouseEvent(event, 62)
    // }
    // toolbarEl.onmouseout = function(event) {
    //   handleMouseEvent(event, 0)
    // }

    // function handleMouseEvent(event, width) {
    //   if (event.target !== toolbarEl) {
    //     // var itemEl = event.target.classList.contains("item") ? event.target: event.target.parentElement
    //     // 1.获取唯一的item
    //     var itemEl = null
    //     if (event.target.classList.contains("item")) {
    //       itemEl = event.target
    //     } else {
    //       itemEl = event.target.parentElement
    //     }

    //     // 2.根据item获取nameElement
    //     var nameEl = itemEl.children[1]

    //     // 3.设置宽度
    //     nameEl.style.width = `${width}px`
    //   }
    // }

  </script>

</body>
</html>

案例实战四 – 登录框

案例实战五 – 王者荣耀tabControl

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="zh-CN">
<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>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main .section-content {
      display: flex;
      justify-content: space-between;
    }

    .main .section-content .left-content {
      width: 872px;
      height: 1000px;
    }
    .main .section-content .right-content {
      width: 295px;
      height: 500px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="section-content">
      <div class="left-content">
        <div class="content-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title">内容中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item active">精品栏目</div>
            <div class="line"></div>
            <div class="item">赛事精品</div>
            <div class="line"></div>
            <div class="item">英雄攻略</div>
          </div>
        </div>
    </div>
  </div>

  <script>
    // 1.获取元素
    var tabControl = document.querySelector(".tab_control")

    // 2.监听鼠标进入(事件委托)
    var activeLiEl = tabControl.querySelector(".active")
    tabControl.onmouseover = function(event) {
      // 1.拿到事件发生的对象
      var itemEl = event.target
      if (itemEl.classList.contains("item")) {
        // 其他的取消active
        // 1.for循环所有的item
        // 2.querySelector(".active")
        // 3.记录当前的active对应的item
        activeLiEl.classList.remove("active")

        // 当前进入的item变成active
        itemEl.classList.add("active")

        // 将最新的itemEl变成activeLiEl
        activeLiEl = itemEl
      }
    }

  </script>
</body>
</html>

案例实战六 – 王者轮播图

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="zh-CN">
<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>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
    }

    .news-section .banner {
      width: 605px;
      background-color: #000;
      overflow: hidden;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      /* overflow: hidden; */
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      font-size: 14px;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      background-color: purple;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner">
        <ul class="image-list">
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_02.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_03.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_04.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_05.jpeg" alt="">
            </a>
          </li>
        </ul>
        <ul class="title-list">
          <li class="item active">
            <a href="#">桑启的旅途故事</a>
          </li>
          <li class="item">
            <a href="#">启示之音抢先听</a>
          </li>
          <li class="item">
            <a href="#">谁成为版本之子</a>
          </li>
          <li class="item">
            <a href="#">观赛体验升级</a>
          </li>
          <li class="item">
            <a href="#">季后赛开战</a>
          </li>
        </ul>
      </div>
      <div class="news"></div>
      <div class="download">
        <a class="download-btn" href="#"></a>
        <a class="guard-btn" href="#"></a>
        <a class="experience-btn" href="#"></a>
      </div>
    </div>
  </div>

  <script>
    // 1.获取元素
    var titleListEl = document.querySelector(".title-list")
    var activeItemEl = document.querySelector(".active")
    
    var imageListEl = document.querySelector(".image-list")

    // 2.底部titles的切换, 同时进行轮播
    titleListEl.onmouseover = function(event) {
      // 1.1.确定发生鼠标进入的元素
      var itemEl = event.target.parentElement
      if (!itemEl.classList.contains("item")) return

      // 1.2.移除之前的active
      activeItemEl.classList.remove("active")

      // 1.3.将active添加到鼠标进入的元素
      itemEl.classList.add("active")

      // 1.4.让activeItemEl指向最新的元素
      activeItemEl = itemEl

      // 1.5.移动对应的imageListEl
      // 1.5.1. 获取itemEl所在的索引
      // for (var i = 0; i < titleListEl.children.length; i++) {
      //   if (titleListEl.children[i] === itemEl) break
      // }
      var index = Array.from(titleListEl.children).findIndex(function(item) {
        return item === itemEl
      })

      imageListEl.style.transform = `translateX(${-604 * index}px)`
      imageListEl.style.transition = `all 300ms ease`
    }

  </script>

</body>
</html>

案例实战七 – 书籍购物车