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实现动画的黄金优化法则的更多相关文章

  1. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  2. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

  3. Oracle学习总结(8)—— 面向程序员的数据库访问性能优化法则

    特别说明: 1.  本文只是面对数据库应用开发的程序员,不适合专业DBA,DBA在数据库性能优化方面需要了解更多的知识: 2.  本文许多示例及概念是基于Oracle数据库描述,对于其它关系型数据库也 ...

  4. mysql 索引优化法则

    建表语句 CREATE TABLE staffs( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR (24) NOT NULL DEFAULT '' C ...

  5. 【腾讯bugly干货分享】Android自绘动画实现与优化实战——以Tencent OS录音机波形动

    前言 本文为腾讯bugly的原创内容,非经过本文作者同意禁止转载,原文地址为:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1180 ...

  6. css3动画的性能优化_针对移动端卡顿问题

    这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 资源网站大全 https://55wd.com 设计导航 ...

  7. SQL优化法则小记

    SQL优化技巧 1.选择最有效率的表名顺序(只在基于规则的优化器中有效): oracle的解析器按照从右到左的顺序处理 from 子句中的表名,from子句中写在最后的表(基础表 driving ta ...

  8. 【Web优化】Yslow优化法则(四)启用Gzip压缩

    Yslow的第4个经验法则指出:启用gzip压缩功能,能够降低HTTP传输的数据和时间,从而降低client请求的响应时间. 本篇是Yslow法则的第四个,主要包含三个方面的内容: 1.      什 ...

  9. ionic1页面切换动画卡顿优化

    https://github.com/shprink/ionic-native-transitions https://www.npmjs.com/package/ionic-native-trans ...

随机推荐

  1. vs.php调试php使用外部的apache进行调试

    vs.php中使用外部的apache进行调试 一般phper们都会有自己配置好的开发调试环境,那么如何在vs.php中使用自己已经配置好的apache+php环境调试 php程序呢?如下: (1)从官 ...

  2. free命令查看内存使用情况(转载)

    linux free命令查看内存使用情况 时间:2016-01-05 06:47:22来源:网络 导读:linux free命令查看内存使用情况,free命令输出结果的各选项的含义,以及free结果中 ...

  3. 【weka应用技术与实践】过滤器

    weka中的过滤器主要用于数据预处理阶段对数据集的各种操作. 今天简单地使用一下过滤器: 首先打开一个自带数据集weather.numeric.arff,这是一个关于通过天气条件,气温以及风力等因素来 ...

  4. Spring MVC 3.x 基本配置

    WEB-INF/web.xml 例1 <?xml version="1.0" encoding="UTF-8"?> <web-app xmln ...

  5. Enjoy Android

    大趋势所迫,开始学习Android, @mark一下

  6. Cwinux源码解析(二)

    我在我的个人博客上发表了第二篇解析文章.欢迎各位读者批评指正. Cwinux源码解析(二)

  7. windows下面go语言环境搭建

    步骤一:golang下载 下载地址是:http://www.golangtc.com/download 下载完成之后解压缩,放到你的c:/根目录下面.然后配置一下环境变量! 环境变量配置如下: 1.新 ...

  8. .NET通用开发框架

    在开源中国社区,简单整理了下比较好的.NET通用开发框架.一个好的通用框架大概包括:开源.扩展性好.灵活性好.复用性好.维护性好.易测试.易发布.易部署.快速业务搭建(或业务集成).通用性强.参考资料 ...

  9. Python函数解析

    对于Python的函数,我们需要记住的是: 1. 函数的默认返回值是None. 2. python是一个自上而下逐行解释并执行的语言.因此,函数的定义必须在函数被调用之前.同名的函数,后定义的会覆盖前 ...

  10. C#语法糖之Cookies操作类 asp.net

    用法: //声名一个数据集合 var listString = new List<string>() { "a", "b", "c&quo ...