美文网首页
对touchmove进行函数节流,优化页面性能

对touchmove进行函数节流,优化页面性能

作者: meteornnnight | 来源:发表于2019-07-31 15:22 被阅读0次

1. touchmove事件对象的属性:

touches:表示当前跟踪的触摸操作的 Touch 对象的数组。
clientX:触摸目标在视口中的 x坐标。 
clientY:触摸目标在视口中的 y坐标。 
identifier:标识触摸的唯一 ID。 
pageX:触摸目标在页面中的 x坐标。 
pageY:触摸目标在页面中的 y坐标。 
screenX:触摸目标在屏幕中的 x坐标。 
screenY:触摸目标在屏幕中的 y坐标。 

2. 利用setTimeout来进行节流

touchmove事件触发频率特别高的时候,很有可能导致页面甚至浏览器崩溃,因此,我们需要限制touchmove event handler的调用次数。

const timer = null
touchmoveHandler (e) {
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
  //actions...
  }, 8)
}

第一次触发事件的时候,timer为空,于是timer设置了一个时间间隔。如果在这个时间间隔内,事件再次被触发,那么旧的定时器被清除,新的定时器重新设置事件间隔。
这样做的后果是,在一个事件被频繁被触发的情况下,始终以一个较为固定的频率去调用事件的handler,从而优化网页性能。

3. 关于防抖

reference:

相关文章

网友评论

      本文标题:对touchmove进行函数节流,优化页面性能

      本文链接:https://www.haomeiwen.com/subject/cwmitqtx.html