发布于 2016-11-16 01:53:58 | 160 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
假设有这样一个动画功能需求：把一个div的宽度从100px变化到200px。写出来的代码可能是这样的：
<div id="test1" style="width: 100px; height: 100px; background: blue; color: white;"></div>
function animate1(element, endValue, duration) {
var startTime = new Date(),
startValue = parseInt(element.style.width),
step = 1;
var timerId = setInterval(function() {
var nextValue = parseInt(element.style.width) + step;
element.style.width = nextValue + 'px';
if (nextValue >= endValue) {
clearInterval(timerId);
// 显示动画耗时
element.innerHTML = new Date - startTime;
}
}, duration / (endValue - startValue) * step);
}animate1(document.getElementById('test1'), 200, 1000);
有没有更好的做法呢？下面先来看一道小学数学题：
A楼和B楼相距100米，一个人匀速从A楼走到B楼，走了5分钟到达目的地，问第3分钟时他距离A楼多远？
这道题带来的启发是，某个时刻的路程是可以通过特定公式计算出来的。同理，动画过程中某个时刻的值也可以通过公式计算出来，而不是累加得出：
<div id="test2" style="width: 100px; height: 100px; background: red; color: white;"></div>
function animate2(element, endValue, duration) {
var startTime = new Date(),
startValue = parseInt(element.style.width); var timerId = setInterval(function() {
var percentage = (new Date - startTime) / duration;
var stepValue = startValue + (endValue - startValue) * percentage;
element.style.width = stepValue + 'px';
if (percentage >= 1) {
clearInterval(timerId);
element.innerHTML = new Date - startTime;
}
}, 13);
}
animate2(document.getElementById('test2'), 200, 1000);
这样改良之后，可以看到动画执行耗时最多只会有10几ms的误差。但是问题还没完全解决，在浏览器开发工具中检查test2元素可以发现，test2的最终宽度可能不止200px。仔细检查animate2函数的代码可以发现：
1.percentage的值可能大于1，可以通过Math.min限制最大值解决。
2.即使保证了percentage的值不大于1，只要endValue或startValue为小数，(endValue - startValue) * percentage的值也可能产生误差，因为Javascript小数运算的精度不够。其实我们要保证的只是最终值的准确性，所以在percentage为1的时候，直接使用endValue即可。
于是，animate2函数的代码修改为：
function animate2(element, endValue, duration) {
var startTime = new Date(),
startValue = parseInt(element.style.width); var timerId = setInterval(function() {
// 保证百分率不大于1
var percentage = Math.min(1, (new Date - startTime) / duration);
var stepValue;
if (percentage >= 1) {
// 保证最终值的准确性
stepValue = endValue;
} else {
stepValue = startValue + (endValue - startValue) * percentage;
}
element.style.width = stepValue + 'px';
if (percentage >= 1) {
clearInterval(timerId);
element.innerHTML = new Date - startTime;
}
}, 13);
}
还有最后一个疑问：setInterval的间隔为何设为13ms？原因是当下显示器的刷新率一般不超过75Hz（即每秒刷新75次，也就是每隔约13ms刷新一次），把间隔跟刷新率同步效果更好。