倒计时 -- setInterval / requestAnimationFrame实现

setInterval 的工作原理是什么?每延迟一定的时间，就执行一次函数
JS 为了避免可能存在大量发生冲突的DOM操作，所以设计为单线程的。了解 EventLoop 的应该知道，setInterval，setTimeout，setImmediate等都属于宏任务，会放到任务队列尾部等待其他任务执行完才会执行，就算 setInterval( () => {}, 0 ) 第二个参数是0，它也不会立即执行，而是在所有任务执行完后才会立即执行。它无法保证在何时执行回调，因为不知道线程何时会空闲
所以用 setInterval 实现的话就算没有其他任务在前，也会有毫秒级的时间差，这个时间差会越积累越多

setInterval 实现

onclick="daojishi('hh',1)"

function daojishi(d, n) {
	let ntime
	let now = new Date()
	if ('ss' === d) now.setSeconds(now.getSeconds() + n)
	if ('mm' === d) now.setMinutes(now.getMinutes() + n)
	if ('hh' === d) now.setHours(now.getHours() + n)
	let last = new Date(now).getTime()
	ntime = (last - new Date().getTime()) / 1000
	let timer = setInterval(() => {
		if (ntime > 1) {
			ntime -= 1
			let h = parseInt(ntime / 3600 % 24);
			let m = parseInt(ntime / 60 % 60);
			let s = parseInt(ntime % 60);
			timeDiv.innerHTML = `${h}小时${m}分钟${s}秒`
		} else {
			clearInterval(timer)
			timeDiv.innerHTML = '倒计时'
		}
	}, 1000)
}

用递归修复有时间差的问题，用减去时间差后得出的间隔时间作为下一次延迟间隔执行回调函数

onclick="daojishi('hh',1)"

function daojishi(d, n) {
	let ntime, count = 0
	let now = new Date().getTime()
	if ('ss' === d) ntime = n * 1000
	if ('mm' === d) ntime = n * 60 * 1000
	if ('hh' === d) ntime = n * 60 * 60 * 1000
	let timer = setTimeout(interval, 1000)

	function interval() {
		count++
		const space = new Date().getTime() - now - count * 1000
		const next = 1000 - space
		if (next < 0) {
			next = 0
		}
		ntime -= 1000
		if (ntime < 0) {
			clearInterval(timer)
			timeDiv1.innerHTML = '倒计时'
		} else {
			let showTime = ntime / 1000
			let h = parseInt(showTime / 3600 % 24);
			let m = parseInt(showTime / 60 % 60);
			let s = parseInt(showTime % 60);
			timeDiv1.innerHTML = `${h}小时${m}分钟${s}秒`
			timer = setTimeout(interval, next)
		}
	}
}

显示器的刷新频率是60Hz 或者 75Hz，页面重绘大概会按照这个刷新频率进行，也就是大概1s重绘60次或者75次，window.requestAnimationFrame(callback) 的执行时机就是在浏览器下一次重绘前调用回调函数更新动画，一般执行次数通常会与浏览器屏幕刷新次数相匹配。而且在当前页面不在激活状态，也就是焦点没在当前页面的话，requestAnimationFrame() 会被暂停调用以提升性能。详细介绍及示例可以去MDN看下 MDN – requestAnimationFrame

requestAnimationFrame 实现

onclick="RAFDaojishi('hh', 1)"

function RAFDaojishi(d, n) {
	let rafId, ntime

	if ('ss' === d) ntime = n * 1000
	if ('mm' === d) ntime = n * 60 * 1000
	if ('hh' === d) ntime = n * 60 * 60 * 1000

	function step(timestamp) {
		let showTime = (ntime - timestamp) / 1000
		let h = parseInt(showTime / 3600 % 24);
		let m = parseInt(showTime / 60 % 60);
		let s = parseInt(showTime % 60);
		RAF_timeDiv.innerHTML = `${h}小时${m}分钟${s}秒`
		if (timestamp > ntime) {
			RAF_timeDiv.innerHTML = `raf倒计时`
			cancelAnimationFrame(rafId);
			return;
		}
		rafId = window.requestAnimationFrame(step)
	}
	rafId = window.requestAnimationFrame(step);
}