setTimeout实现动画的黄金优化法则
1、使用递归思想实现setTimeout的轮询动画:在每一次执行方法的时候都重新的设置一个定时器,然后在指定时间内重新的执行当前的方法
问题:每一次设置的定时器,虽然不执行了,但是还存在呢,浪费性能 ->在每一次执行方法的时候首先把上一次创建的定时器清除掉
[案例]
var timer = null;
function move() {
window.clearTimeout(timer);
<js code>
timer = window.setTimeout(move, 10);
}
move(); 2、当我们的元素即将到达目标值的时候,我们经常会出现这样一个问题:走一步比目标值大,但是不走这一步还要比目标值小,这样的话,浏览器就会徘徊到底走还是不走->"边界优化" ->我们的边界判断把步长加上:假设多走一步会不会比边界大,如果大的话,我们让其直接到边界即可...
[案例]
function move(tar) {
window.clearTimeout(timer);
var curL = utils.getCss(oDiv, "left");
if (curL < tar) {
if (curL + 7 >= tar) {//->边界判断加步长
utils.setCss(oDiv, "left", tar);
return;
}
utils.setCss(oDiv, "left", curL + 7);
}
.....
} 3、如果我们的move方法执行的时候需要传递参数,我们可以按照如下的操作写代码:
[案例1]
function move(tar){
window.clearTimeout(timer);
<js code>
timer=window.setTimeout(move,10);//->这块无法传递给move参数
}
//->这样写不行,因为第二次定时器执行move方法的时候没有办法给我们的方法传递参数 [案例2]
function move(tar){
window.clearTimeout(timer);
<js code>
timer=window.setTimeout(function(){
move(tar);
},10);
}
->这样写可以实现,但是由于作用域的累积嵌套会导致私有的作用域不进行自主销毁,浪费性能->"作用域嵌套累积问题" [案例3]
->解决这样的问题,只需要在move中在定义一个小的方法,把所有需要重复执行的动画代码放在小的方法中执行(小的方法是不需要传递参数的)
function move(tar){
var _move=function(){
window.clearTimeout(timer);
if(curL<tar){
...
}
timer=window.setTimeout(_move,10);
};
_move();
}
->这样写的话,只有move这个方法第一次形成的私有的作用域不销毁,其余每一次执行_move形成的私有作用域在代码执行完成后立即销毁 4、按照上述的代码改完后,我们发现存在问题了:每一次执行move都会形成一个新的不销毁的私有的作用域,timer是控制动画的,但是此时的timer是每个作用域私有的变量
->点击向左:形成一个不销毁的私有的作用域A,timer是正在向左的动画,操作的是oDiv这个元素
->同时点击向右:形成一个新的不销毁的私有的作用域B,timer是正在向右的动画,操作的是oDiv这个元素
问题:一个元素既有向左走的动画,也有向右走的动画,原地徘徊了 [源代码]
function move(tar) {
var timer = null;
var _move = function () {
window.clearTimeout(timer);
<js code>
timer = window.setTimeout(_move, 10);
};
_move();
} ->把timer设置为全局变量即可:因为这样的话oDiv的每一次动画用的是同一个timer,这样保证了第二个动画开始的时候,会把第一个动画清除掉,元素同时进行的只有一个动画了
->但是全局变量使用多了不好,我们可以把timer设置为当前元素的自定义属性->"把定时器设置为当前元素的自定义属性,防止同一个元素同时两个动画进行"
function move(tar) {
var _move = function () {
window.clearTimeout(curEle.timer);
<js code>
curEle.timer = window.setTimeout(_move, 10);
};
_move();
}
setTimeout实现动画的黄金优化法则的更多相关文章
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- 高效率http页面优化法则一【JS对DOM的操作】
高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...
- Oracle学习总结(8)—— 面向程序员的数据库访问性能优化法则
特别说明: 1. 本文只是面对数据库应用开发的程序员,不适合专业DBA,DBA在数据库性能优化方面需要了解更多的知识: 2. 本文许多示例及概念是基于Oracle数据库描述,对于其它关系型数据库也 ...
- mysql 索引优化法则
建表语句 CREATE TABLE staffs( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR (24) NOT NULL DEFAULT '' C ...
- 【腾讯bugly干货分享】Android自绘动画实现与优化实战——以Tencent OS录音机波形动
前言 本文为腾讯bugly的原创内容,非经过本文作者同意禁止转载,原文地址为:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1180 ...
- css3动画的性能优化_针对移动端卡顿问题
这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 资源网站大全 https://55wd.com 设计导航 ...
- SQL优化法则小记
SQL优化技巧 1.选择最有效率的表名顺序(只在基于规则的优化器中有效): oracle的解析器按照从右到左的顺序处理 from 子句中的表名,from子句中写在最后的表(基础表 driving ta ...
- 【Web优化】Yslow优化法则(四)启用Gzip压缩
Yslow的第4个经验法则指出:启用gzip压缩功能,能够降低HTTP传输的数据和时间,从而降低client请求的响应时间. 本篇是Yslow法则的第四个,主要包含三个方面的内容: 1. 什 ...
- ionic1页面切换动画卡顿优化
https://github.com/shprink/ionic-native-transitions https://www.npmjs.com/package/ionic-native-trans ...
随机推荐
- ruby -- 基础学习(三)设置中国时区时间
Rails连接MYSQL数据库,默认显示UTC时间.如果想要改成中国时区时间,按照下面修改: 在config/application.rb中找到 class Application < Rail ...
- Android性能优化之内存篇
下面是内存篇章的学习笔记,部分内容与前面的性能优化典范有重合,欢迎大家一起学习交流! 1)Memory, GC, and Performance 众所周知,与C/C++需要通过手动编码来申请以及释放内 ...
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- 利用react native创建一个天气APP
我们将构建一个实列程序:天气App,(你可以在react native 中创建一个天气应用项目),我们将学习使用并结合可定义模板(stylesheets).盒式布局(flexbox).网络通信.用户输 ...
- [Math] A love of late toward Mathematics - how to learn it?
Link: https://www.zhihu.com/question/19556658/answer/26950430 王小龙 ,数学,计算机视觉,图形图像处理 数学系博士怒答! 我想大家 ...
- IP Failover Setup using Keepalived on CentOS/Redhat 6
source url:http://tecadmin.net/ip-failover-setup-using-keepalived-on-centos-redhat-6/ Keepalived is ...
- 20款优秀的国外 Mobile App 界面设计案例
在下面给大家分享的移动应用程序界面设计作品中,你可以看到不同创意类型的视觉效果.如果你想获得灵感,那很有必要看看下面20个优秀用户体验的移动应用 UI 设计.想要获取更多的灵感,可以访问移动开发分类, ...
- 堆表和%%lockres%%函数
在今天的文章里,我想向你展示下SQL Server里一个未公开的函数,还有你如何用那个函数来找出在哪页记录被存储. %%lockres%% 今天我想向你展示的未公开函数叫做%%lockres%%,它与 ...
- 基于HTML5的电信网管3D机房监控应用
先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网 ...
- Python+Selenium进行UI自动化测试项目中,常用的小技巧4:日志打印,longging模块(控制台和文件同时输出)
在前段时间,为了给项目中加入日志功能,就想到了 logging 模块,百度logging一大推,都是各种复制的,并没有找到自己想要的结果:我的目的很简单,就是:在把日志写入文件的同时在控制台输出,更加 ...