第一次写博客随笔,废话不多说,间接进去正题。

   
如今径直专注于活动终端的开销,遭逢了一个相比困难的作业,就是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]2018正版葡京赌侠诗,.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时候的特性。

    第一次写博文,不足之处请我们指教,我必然虚心接受!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图