requestAnimationFrame学习记录

背景

前几天看js性能优化的时候，看见requestAnimationFrame这个函数，其实以前也有见到多这个函数，当时只搜了一下它的用法，并没有深入的了解，这次趁热打铁，进行了进一步的了解

1. requestAnimationFrame到底是个啥？干嘛用的？
   嗯，那就先来说说这个函数是个啥吧！！！
   我们在做动画效果的时候,对于js通常会用到setTimeout or setInterval，但是定时器的间隔时间并不怎么准确。requestAnimationFrame的作用和定时器差不多，是浏览器专门为动画提供的API，相比定时器，多了一些优势。它的回调函数执行间隔时间时和显示器刷新频率是一致的。
2. requestAnimationFrame的用法

	1.handle = requestAnimationFrame(callback);
	2.cancelAnimationFrame(handle)

第一点：
handle：一个非零整数，是在requestAnimationFrame回调函数列表中的唯一标识。在删除动画的时候，就需要用到这个唯一标识了
callback：回调函数，想要实现的效果都写在这里。下次重新绘制的时候执行，只接受一个参数，一个高精度时间戳，是函数执行时的时间。
第二点：
取消操作，无返回值
先看一个栗子

   let deg = 0;
      let id = null;
      let box = document.querySelector('.box')
      let stop = document.querySelector('.stop')
      box.onclick = function() {
   
         requestAnimationFrame(fu