1. 设置延时

  • setTimeout/clearTimeout
    • 指定某个函数或代码在多少毫秒之后执行
    • 返回一个整数，表示定时器的编号，以后可以用来取消这个定时器 ```javascript / 先输出1，再输出2，3秒后输出刘德华，5秒后输出郭富城 第一个定时器timer1值为1 第二个定时器timer2值为2，以此类推 /

console.log(1)

//timer1 —- 1 let timer1 = setTimeout(() => { console.log(‘刘德华’) }, 3000)

//timer2 —- 2 let timer2 = setTimeout(() => { console.log(‘郭富城’) }, 5000)

console.log(2)

  1. ```javascript
  2. /*
  3.   下面函数输出结果为 2 1 这是为什么？
  4.   延时0ms和延时1ms效果其实是一样的，定时器有最小时间粒度
  5. */
  8. setTimeout(()=>{
  9.   console.log(2)
  10. }, 1)
  12. setTimeout(()=>{
  13.   console.log(1)
  14. }, 0)

2. 设置间隔

  • setInterval/clearInterval
    • 指定某个函数或代码在每间隔多少毫秒执行一次
    • 返回一个整数，表示定时器的编号，以后可以用来取消这个定时器 ```javascript / 先输出1，再输出2，每隔3秒输出一次刘德华 /

console.log(1)

let timer1 = setInterval(() => { console.log(‘刘德华’) }, 3000)

console.log(2)

<a name="bn5rU"></a>
# 3. 计时器案例
```javascript
// 将时间以字符串模板xx:xx:xx形式输出

// 方法1
function showTime() {
  let d = new Date()
  let hours = d.getHours()
  let minutes = d.getMinutes()
  let seconds = d.getSeconds()
  // 对时间格式进行优化 xx:x:xx  --->   xx:xx:xx
  const format = s => (s + '').length > 1 ? s : `0${s}`
  return `${format(hours)}:${format(minutes)}:${format(seconds)}`
}

// 方法2

function showTime() {
  // toString()方法输出格式
  // "Fri Sep 11 2020 08:52:33 GMT+0800 (中国标准时间)"
  let str = new Date().toString()
  let res = str.match(/\d{2}:\d{2}:\d{2}/)
  return res[0]
}
  • 计时器
    <html>
<head>
<meta charset="utf-8">
<title>计时器</title>
</head>
<body>
<div class="clock">00:00:00</div>
<button id="start">开始</button>
<button id="pause">停止</button>
</body>
</html>
    ```javascript function showTime() { document.querySelector(‘.clock’).innerText = new Date().toString().match(/\d{1,2}:\d{1,2}:\d{1,2}/)[0] }

let btnStart = document.querySelector(‘#start’) let btnPause = document.querySelector(‘#pause’)

let timer = null

btnStart.onclick = function() { timer = setInterval(() => { showTime() } , 1000) }

btnPause.onclick = function() { clearInterval(timer) }

```