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 ...
随机推荐
- sencha touch api 使用指南
本文主要讲解如何使用sencha touch的api以及如何查看api中官方示例源码 前期准备 1.sdk 下载地址:http://www.sencha.com/products/touch/down ...
- 牛顿方法(Newton-Raphson Method)
本博客已经迁往http://www.kemaswill.com/, 博客园这边也会继续更新, 欢迎关注~ 牛顿方法是一种求解等式的非常有效的数值分析方法. 1. 牛顿方法 假设\(x_0\)是等式的 ...
- POJ 1308 Is It A Tree?
Is It A Tree? Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18778 Accepted: 6395 De ...
- 二十二、【轻量级开源框架】EFW框架Web前端开发之JqueryEasyUI
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...
- 解决错误: java.lang.NoClassDefFoundError: antlr/RecognitionException
网络质量不好的情况下,访问maven.org网站下载jar包,很有可能下载的包不完整或损坏的(表面看不出来):所以,最好的办法就是-直接到maven网站下载,然后放到对应的.m2目录,然后eclips ...
- spark 编译
http://blog.csdn.net/zyj8170/article/details/44678405
- ruby -- 基础学习(六)时间计算
计算下一天的这个时刻, # 比如"2013-8-16 18:45:12" 的下一天的这个时刻 “2013-8-17 18:45:12” Time.now + 1.day 如果想得到 ...
- AngularJS 监控对象属性:$watch和$digest
监控对象属性:$watch和$digest $watch和$digest是相辅相成的.两者一起,构成了Angular作用域的核心:数据变化的响应.如果你学习过WPF,并基于WPF使用过一些MVVM框架 ...
- Javascript起源...
Javascript的设计思路是这样的: (1)借鉴C语言的基本语法: (2)借鉴Java语言的数据类型和内存管理: (3)借鉴Scheme语言,将函数提升到"第一等公民"(fir ...
- 使用fat-jar打包多个java工程为可执行文件
对于一个从C++转向Java的程序员来说,制作java的可执行文件,也算是比较棘手的问题.项目是前几个同事留下来的,几个必备的库文件和制作可执行文件的工具居然都是加密未解封的:不知道是不是因为公司和前 ...