富甲天下4修改器,七月投资,贫道混初唐
第一次写博客随笔，废话不多说，直接进入正题。
最近一直专注于移动终端的开发，碰到了一个比较棘手的事情，就是touch事件，大家都知道，touch事件有几种，无非就是touchstart,touchmove,touchend，touchstart和touchend应该算是单次触发式的事件，而touchmove因为是手指触碰之后，可以持续触发的事件，然后，每次触发一次或者说是某一段的touchmove的时候，也就是在持续进行js解析和执行，这样，会阻塞页面渲染，比如，我touchmove触发一段，然后渲染一次html页面，然后我手指按着不放，进入第二段touchmove事件，这个时候，从第一次的html渲染到第二次的html渲染之间，会有阻塞现象，短时间的触发还好，可能感觉不到，然后如果你需要长时间去触发的话，就会很明显的觉的卡顿，万一你的手机配置不高，性能不好的话，那就会卡的不要不要的！
然后，这个问题也不是不能得到解决，先附上一段代码：
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
//你要渲染的页面
}
});
这段代码意思是，当我手指触碰在手机显示屏时，从左滑到右边，会触发alert事件，然而大家看到了某个方法没有，对，没错，那就是e.preventDefault();只要触发一次touchmove，他就会做一次判断，取消body的默认行为，那这样子势必会有性能问题，所以，我们不妨把e.preventDefault()保存到一个变量中：
function updateTouches(event) {
touches = event.touches;
}
然后监听touchmove事件：
document.addEventListener('touchmove', updateTouches);
然后用windows的requestAnimationFrame，可以让动画更流畅，运行性能更高，通过requestAnimationFrame来更新渲染页面。当然，如果你想兼容各种浏览器，需要对不同的浏览器判断是否支持这个方法，这里我们假设浏览器支持这个方法。
window.requestAnimationFrame(renderEverything);
这里我们队这个方法传入了一个renderEverything的函数参数，这个函数里面就是touchmove事件具体要干的事情：
function renderEverything() {
//这里就是你要做的事情
}
我们把以上代码结合起来：
$("body").on("touchstart", function(e) {
document.addEventListener('touchmove', updateTouches);
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
window.requestAnimationFrame(renderEverything);
function updateTouches(e) {
touches = e.preventDefault();
}
function renderEverything() {
$("body").on("touchmove", function(e) {
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(X) > Math.abs(Y) && X > 0) {
//你要渲染的页面
}
})
}
虽然这样子不能完完全全移除卡顿的现象，通常这和整个页面结构，以及js解析和css渲染紧密相关，但是，这样子的确可以大大的优化使用touch时候的性能。
第一次写博文，不足之处请大家指教，我肯定虚心接受！
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Windows Phone 7编程实践—推送通知(剖析推送通知实现架构)
Esri for Window Phone 7（一） 加载BingMap
浅谈ListBox在Windows Phone 7 中的使用
我要评论
网友评论