使用函数防抖监听vue鼠标滚轮事件

七月pro

已于 2022-10-09 17:34:59 修改

阅读量2.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端探究文章标签： vue.js javascript 前端

于 2020-03-23 14:28:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_38728902/article/details/105047927

前端探究专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在全屏滚动页面中优化鼠标滚轮滚动监听的方法，通过使用防抖函数，确保在指定时间内滚动事件不会重复触发，有效提升了用户体验并减少了不必要的计算负担。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：全屏滚动页面中鼠标滚轮滚动，指定时间内触发滚动时间不重复执行

1、先定义防抖函数

// 函数防抖
// immediate - 是否首次执行
const debounce = (func, dalay = 100, immediate = true) => {
  let timer, callNow = immediate;
  return (...args) => {
    if (timer) clearTimeout(timer);
    if (callNow) {
        func(...args);
        callNow = false;
    }
    timer = setTimeout(() => {
        func(...args);
    }, dalay)
  }
}

export { debounce }

2、在需要使用函数防抖的组件中导入

<script>
import { debounce } from '@/utils/util'

export default {
  mounted() {
    window.addEventListener('mousewheel', debounce(this.handleScroll), false)
    window.addEventListener('DOMMouseScroll', debounce(this.handleScroll), false)
  },
  methods: {
    handleScroll(e) {
      console.log(e.deltaY)  // 正值为向下滚动，负值为向上滚动
    }
  }
}

</script>