至于touch事件对于质量的影响lovebet体育

    第三回写博客随笔,废话非常少说,间接步向正题。

   
近年来直接小心于运动终端的费用,遇到了一个相比费力的业务,正是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);

此处我们队那么些主意传入了二个render伊芙rything的函数参数,这些函数里面纵使touchmove事件具体要干的业务:

function renderEverything() {
  //这里便是你要做的政工
}

我们把上述代码结合起来:

$(“body”).on(“touchstart”, function(e) {
  document.addEventListener(‘touchmove’, updateTouches);
  startX = e.originalEvent.changedTouches[0].pageX,
  startY = e.originalEvent.changedTouches[0]lovebet体育,.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时候的习性。

    第2回写博文,不足之处请大家指教,小编必然虚心接受!

相关文章