JavaScript之深入浅出定时器

什么是定时器

定时器指的是每隔一段时间执行一次

定时器的使用方法

在JavaScript中提供了两种定时器的方法setInterval()和setTimeout()

setInterval()的使用方法

//setInterval(代码块,时间戳)
let i=0
let intervalTime=setInterval(function(){
	i++
	console.log('i的值',i)
},1000)
console.log('定时器返回的值',intervalTime)

setTimeout()的使用方法

//setTimeout(代码块,时间戳)
let i=0
let timeoutTime=setTimeout(function(){
	i++
	console.log(i)
},1000)

setInterval()和setTimeout()的区别

首先我们看一下 setInterval() 和 setTimeout() 分别打印了什么，
setInterval() 打印如下：

setTimeout() 打印如下：

setInterval()和setTimeout()的区别：setInterval()定时器会一直执行,setTimeout()只会执行一次

为什么使用定时器

定时器可以帮祝我们实现动态效果，以及实时获取最新资讯。

如何实现一个简单的定时器

let setTimeout = (fn, timeout, ...args) => {
  // 初始当前时间
  const start = +new Date()
  let timer, now
  const loop = () => {
    timer = window.requestAnimationFrame(loop)
    // 再次运行时获取当前时间
    now = +new Date()
    // 当前运行时间 - 初始当前时间 >= 等待时间 ===>> 跳出
    if (now - start >= timeout) {
      fn.apply(this, args)
      window.cancelAnimationFrame(timer)
    }
  }
  window.requestAnimationFrame(loop)
}

function showName(){ 
    console.log("Hello")
}
let timerID = setTimeout(showName, 1000);

点击当前文字即可详细查看如何实现一个简单的定时器→

日常面试中出现的定时器题目

面试题一

以下代码会输出什么？

for (var i = 0; i < 5; i++) {
	setTimeout(function() {
		console.log(i);
	}, 1000)
}

A.1,2,3,4,5
B.0,1,2,3,4
C.4,4,4,4,4
D.5,5,5,5,5
这道题可能很多人要么选B，要么C这两种答案都是错误的
正确答案是D
解题思路：
1.代码是从上往下执行的
2.for循环会先执行完成
3.在执行我们延迟定时器
4.当i循环到5时结束了循环，但是延迟定时器这个时候才执行，就会导致打印时变成了5,
5.延迟定时器循环了五次，打印就执行了五次，最后就会输出5次5

分享不易，都观看到这里了，还不点赞收藏嘛！