写在前面

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

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 拉取:

License

This content is released under the MIT License.

50行代码实现的高性能动画定时器 raf-interval的更多相关文章

  1. HTML5游戏实战(1):50行代码实现正面跑酷游戏

    前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...

  2. python爬虫实战:利用scrapy,短短50行代码下载整站短视频

    近日,有朋友向我求助一件小事儿,他在一个短视频app上看到一个好玩儿的段子,想下载下来,可死活找不到下载的方法.这忙我得帮,少不得就抓包分析了一下这个app,找到了视频的下载链接,帮他解决了这个小问题 ...

  3. 50行代码实现python计算器主要功能

    实现功能:计算带有括号和四则运算的式子   3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...

  4. 50行代码实现缓存,JAVA内存模型原理

    遇见这样的高人怎么办??下面是一个简单缓存的实现,相当牛叉!自己看吧,只有50行代码. 摘自:http://www.oschina.net/code/snippet_55577_3887 import ...

  5. 50行代码实现GAN | 干货演练

    2014年,Ian Goodfellow和他的同事发表了一篇论文,向世界介绍了生成对抗网络(GAN).通过对计算图和博弈论的创新性组合,他们表明如果有足够的建模能力,两个相互对抗的模型可以通过普通的反 ...

  6. 基于requirejs+bluebird,50行代码实现轻巧实用的前端CMD加载器

    首先是github地址,可以用git克隆命令也可以直接在git页面下载 https://github.com/kazetotori/js-requireAsync 下载下来后目录结构是这样的 -pac ...

  7. [Lua]50行代码的解释器,用来演示lambda calculus

    嗯,来写写经过: 在知乎上看见用Belleve牛用javascript写了一个精简的lisp解释器 => 我也想写一个,用lua写,能多简单呢? => 写了一个阉割的scheme解释器,包 ...

  8. OpenCV图像识别初探-50行代码教机器玩2D游戏【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  9. 50行代码写的一个插件,破解一个H5小游戏

    小游戏链接:测测你的眼睛对色差的辨识度http://www.webhek.com/post/color-test.html?from=timeline 废话不多说,先放代码: window.onloa ...

随机推荐

  1. Mysql数据库二进制安装

    MySQL数据库有四种安装方法: 源码包编译安装 RPM包安装 二进制文件安装 官方yum源安装 这里我们主要介绍二进制包的安装方法 在MySQL官网下载二进制包并且上传到服务器上 解压二进制包 [r ...

  2. poj3417

    poj3417 题意 给出一颗 n 个节点, n - 1 条边的树,再加上 m 条新边,允许删掉树边和新边各一条,问能使树分为两部分的方案数. 分析 在树的基础上加上不重复的新边一定会构成环,那么考虑 ...

  3. Spring的<context:property-placeholder.../>在junit中不起作用,失效,解决方法

    大家都知道,我们使用spring框架的时候喜欢把可以配置的变量放入一个properties配置文件中,然后在spring的applicationContext.xml配置文件中加入配置: <co ...

  4. 作为前端,我为什么选择 Angular 2?

    转自:https://sanwen8.cn/p/2226GkX.html 没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷:它难吗?它写得快吗?可维护性怎样 ...

  5. OC对象之旅 weak弱引用实现分析

    Runtime学习 -- weak应用源码学习   Runtime源码分析,带你了解OC实现过程.其中参考了大量的大神的代码以及文献,里面也有个人的见解,欢迎拍砖,欢迎交流. 两种常见使用场景 /// ...

  6. java基础(六章)

    一.for循环的使用场合 l  while循环--先判断,再循环 while(1.条件表达式){      //2.循环操作      //3.更改循环条件表达式 } l  do-while--先循环 ...

  7. js获取地址栏某个参数

    一.获取单个参数: 若地址栏URL为:abc.html?id=123 function getString(){      var locurl=location.href;      var sta ...

  8. ES6 常用总结——第一章(简介、let、const)

    ES6整理 1. ECMAScript 6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准.它的目标,是使得 JavaScript 语言可以用来编写复杂 ...

  9. thinkphp5.0学习笔记(二)

    本文为公司制作API接口后台的小结! 1.命名注意事项: 不要使用易混淆的名字,如index,index01... 我喜欢用拼音... 比如: public function zhuce(Reques ...

  10. C#基础知识-XML介绍及基本操作(十)

    在讲了一系列的基础文档之后,现在开始讲一些实例.对于一些数据不是很大的程序,或者只是一些配置文件,需要本地存储的,完全可以使用XML代替数据库,因为只是去操作单个文件会比操作数据库要简单很多,在程序中 ...