调整 jQuery 动画效果的更新频率

文章同步发布在http://seanlin0324.blogspot.com/2012/04/jquery-cpu.html

前阵子在开发平板应用时
由于需要仿製Ipad上的主页面
让萤幕上排满App 图示的情况下
还必须要滑动换页
公司的装置在降频且使用旧版webkit核心的浏览器下
显得有些许顿挫感
后来想到可以针对jQuery动画效果的部份去调整

这时候得手动调整
jQuery.fx.interval
範例DEMO on jsfiddle http://jsfiddle.net/4Wger/1/

我们先建立基本的HTML

  <p><input type="button" value="Run"/></p>  <div class="box"></div>

这里我们建了一个box及启动按钮

设定一下css 让box有个颜色跟基本大小
这边要注意的是
要做动画效果必须要设定position为相对或是绝对定位

.box {     width:50px;     height:30px;    background-color:#000;    position: relative;        }

再来就是重头戏了:p
我们来建立按钮事件
让box每按一次移动 100px

jQuery.fx.interval = 18;$("input").click(function(){    $("div").animate({left:'+=100px'}, 500);});​

jQuery.fx.interval 的型态为数字, 预设值为13毫秒
我们为了调整更新的效率
将它改为18

虽然只是小小的5毫秒
却还是让原本在平板上有顿挫感的程式
变成咻咻咻的流畅动画
不过数字不能调太大
不然因为更新频率间隔太长
反而会造成动画效果不佳的情形