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

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:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容