定时器

1. setTimeout() 用来指定某个函数或字符串在指定的毫秒数之后执行 只执行一次

   • clearTimeout() 清除定时器

   /*setTimeout() 有两个参数
   	1.执行体 注意:函数传递参数可以把实参放在时间参数的后面(不兼容IE9及以下)
   	2.时间 多久执行*/
   let a=0
   let fun =()=>{
       a++
       console.log(a)
       setTimeout(fun,1000)
   }
   setTimeout(fun,1000)
   
   //clearTimeout() //参数是定时器的名称
   let timer = 0
   let a = 0
   let fun=()=>{
       a++
       console.log(a)
       timer = setTimeout(fun,1000)
   }
   fun()
   
   document.onclick = ()=>{
       console.log("定时器停止了")
       clearTimeout(timer)
   }
   

2. setInterval() 用来指定某个函数或字符串在指定的毫秒数之后执行 无限循环

   • clearInterval() 清除定时器

   //传递参数是一样的结构
   let timer = setInterval(function(){
       console.log(1)
   },1000)
   document.onclick = ()=>{
       console.log("定时器停止了")
       clearInterval(timer)
   }
   

3. requestAnimationFrame() 浏览器专门为动画提供的API 浏览器会自动优化方法的调用 页面不是激活的状态下 动画暂停 有效节省CPU开销 用法与setTimeout相似 只是不需要设置时间间隔

   • cancelAnimationFrame()

   //复合动画帧的计时器,使得动画更流畅,也只是执行一次
   let timer = 0
   let a = 0
   function fun(){
       a++
       console.log(a)
       timer = requestAnimationFrame(fun)
   }
   fun()
   document.onclick=()=>{
       console.log("定时器停止了")
       cancelAnimationFrame(timer)
   }