博客

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

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>