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. 使用SQL联合查询来构建临时vo对象的应用

    联合查询: 表1: team球队表 表2:schedule 赛程表 需要数据: 球队名称.主队ID.主队名称.客队ID.客队名称.胜负情况 方法1. Object数组取出列和数值 import jav ...

  2. undefined reference to `_imp___ZN8QWebViewC1EP7QWidget'

    add this line to your .pro file: QT += webkitwidgets

  3. 【转】Linux下svn常用指令

    转自: http://blog.csdn.net/myarrow/article/details/8110858 1.将文件checkout到本地目录svn checkout path(path是服务 ...

  4. Java知多少(105)套接字(Socket)

    网络应用模式主要有: 主机/终端模式:集中计算,集中管理: 客户机/服务器(Client/Server,简称C/S)模式:分布计算,分布管理: 浏览器/服务器模式:利用Internet跨平台. www ...

  5. unity4.6 failed to update unity web player

    unity4.6 failed to update unity web player 新升级的 4.6.2P2 版本修复了IOS很多的bug. 但突然发现导出的Web版本反而不能工作了. “faile ...

  6. VIM配置相关记录

    把一直使用中的vim配置做个GIT入库管理,也把之前积累在机器上的文档,做个汇总. https://github.com/wujuguang/kyvim 1. 安装完整版vim vi和vim的区别?在 ...

  7. [Math] Hidden Markov Model

    链接:https://www.zhihu.com/question/20962240/answer/33438846   霍金曾经说过,你多写一个公式,就会少一半的读者. 还是用最经典的例子,掷骰子. ...

  8. [OpenCV] HighGUI

    From: http://www.cnblogs.com/xylc/p/3406026.html 本模块为跨平台的gui/IO组件,支持平台包括windows,linux,mac,IOS,androi ...

  9. Transact-SQL 示例 - UPDATE中使用INNER JOIN

    一般情况下博主已经对在SELECT语句当中使用INNER JOIN非常娴熟,但在UPDATE当中使用INNER JOIN的场景就为数不多了.以下博主将为你介绍在UPDATE场景当中使用INNER JO ...

  10. Nightwatch.js – 轻松实现浏览器的自动测试

    Nightwatch.js 是一个易于使用的,基于 Node.js 平台的浏览器自动化测试解决方案.它使用强大的 Selenium WebDriver API 来在 DOM 元素上执行命令和断言. 语 ...