50行代码实现的高性能动画定时器 raf-interval

写在前面

raf-interval 是基于 window.requestAnimationFrame() 封装的定时器。

• Github: https://github.com/dntzhang/raf-interval

window.requestAnimationFrame() 方法告诉浏览器您但愿执行动画，并请求浏览器调用指定的函数在下一次重绘以前更新动画。该方法将在重绘以前调用的回调做为参数。因此

若是您想在下一个重绘时为另外一个框架设置动画，您的回调例程必须调用 requestAnimationFrame()。
若是你想作逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动做。一般来讲，被调用的频率是每秒60次，可是通常会遵循W3C标准规定的频率。若是是后台标签页面，重绘频率则会大大下降。

经过 raf-interval 咱们能够把抽象的对象的自身的循环逻辑经过 setRafInterval 书写在自身的代码里，可是却执行在惟一的 ticker，这样逻辑不会被拆得支离破碎，更好维护方便扩展。

API

• setRafInterval 开启定时器
• clearRafInterval 清除定时器

和setInterval 和 clearInterval 用法一致！超级简便

特性

• 和 setInterval clearInterval 同样的使用方式
• 当用户切到其余tab自动中止循环，低功耗，更省电
• 简单的API就能制做高性能丝般顺滑的的动画效果
• 智能地中止的开启循环

使用

没有 raf-interval 以前:

var i = 0
var interval = setInterval(function() {
    console.log(i++)
    if (i > 6) {
        clearInterval(interval)
    }
},1000)

有了 raf-interval 以后:

var i = 0
var rafInterval = setRafInterval(function() {
    console.log(i++)
    if (i > 6) {
        clearRafInterval(rafInterval)
    }
},1000)

安装

$ npm install raf-interval

或者从 CDN 拉取:

• https://unpkg.com/raf-interval@0.3.0/raf-interval.js

License

This content is released under the MIT License.