API接口

Window对象定义了以下两个接口:

  1. partial interface Window {
  2. long requestAnimationFrame(FrameRequestCallback callback);
  3. void cancelAnimationFrame(long handle);
  4. };

1、执行requestAnimationFrame之后再执行cancelAnimationFrame。

下面代码只会执行一次a:

  1. var id = null;
  2.  
  3. function a(time) {
  4. console.log("animation");
  5. id = window.requestAnimationFrame(a);
  6. window.cancelAnimationFrame(id);
  7. }
  8.  
  9. a();

2、在callback外部执行cancelAnimationFrame。 下面代码只会执行一次a

  1. function a(time) {
  2. console.log("animation");
  3. id = window.requestAnimationFrame(a);
  4. }
  5.  
  6. a();
  7. window.cancelAnimationFrame(id);

requestAnimationFrame 与 cancelAnimationFrame的更多相关文章

  1. 关于requestAnimationFrame()和cancelAnimationFrame()与定时器之间的比较

    在渲染页面动画的时候,其实也没有必要用定时器(setInterval),其实requestAnimationFrame()和cancelAnimationFrame()也能达到相应的效果,他是HTML ...

  2. requestAnimationFrame/cancelAnimationFrame——性能更好的js动画实现方式

    用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是 ...

  3. requestAnimationFrame,Web中写动画的另一种选择

    HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...

  4. 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  5. requestAnimationFrame与setInterval,setTimeout

    自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后 ...

  6. requestAnimationFrame

    (function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.lengt ...

  7. 性能更好的js动画实现方式——requestAnimationFrame

    用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是 ...

  8. requestAnimationFrame制作动画:旋转风车

    在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...

  9. 记一次动画的优化--requestAnimationFrame、webp

    需要写一个类似帧动画的东西,但是每一帧是一张全屏的图,而且量特别大,600都张,而且存在跳帧的问题,只有把速度调的很快还可以看着不跳帧.但是只用谷歌还真正常播放. 其实优化起来两个方面.一个是用req ...

随机推荐

  1. GIL解释器,协程,gevent模块

    GIL解释器锁 在Cpython解释器中,同一个进程下开启的多线程,同一时刻只能有一个线程执行,无法利用多核优势 首先需要明确的一点是GIL并不是Python的特性,它是在实现Python解析器(CP ...

  2. 开启无线WLAN方式

    1.以管理员身份运行命令提示符 因为下面的步骤必须在管理员权限下运行,因此我们从开始菜单找到"命令提示符",或直接键入cmd快速搜索,右键单击它,选择"以管理员身份运行& ...

  3. WCF RIA SERVICE相关技术

    WCF RIA SERVICE实体属性拷贝 private void DoSubmit() { ((IEditableObject)this.RepairContract).EndEdit(); va ...

  4. 第五课 Makefile文件的制作(补充)

    序言: 前面的几节课讲解Makefile的一些基本知识也做了一些小例子实践了几下,那么到现在普通的练习则是没有问题.但是如果做项目文件较多又分层次等等还是会碰上好多问题的,这节课补充一些知识. 知识点 ...

  5. 微信小程序组件swiper

    视图容器swiper:官方文档 Demo Code Page({ data:{ imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen ...

  6. BeatSaber节奏光剑插件开发官方教程1-创建一个插件模板

    原文:https://wiki.assistant.moe/modding/intro 一.简介 Beat Saber 开发环境:unity2018.C#..NET framework 4.6. 此教 ...

  7. Limit CPUID MAX

    Limit CPUID MAX to 3.是指出现在英特尔平台的BIOS设置选项.很多主板也显示成CPUID maximum value limit选项.中文意义是:限制执行CPUID指令返回数值大于 ...

  8. mysql DATE_FORMAT 年月日时分秒格式化

    SELECT DATE_FORMAT(NOW(),'%Y-%m-%d %H:%i:%s')

  9. Javascript -- 级联菜单, javascript解析xml文件

    1. cities.xml 保存省份和城市 <?xml version="1.0" encoding="GB2312"?> <china> ...

  10. 抓jsoup_02_数据

    1.测试网页:http://ajax.mianbao99.com/vod-showlist-id-8-order-time-c-3719-p-1.html ZC: 直接查看的话,使用这个链接:http ...