对scroll进行防抖的优化（在vue中使用防抖）

目标效果：在一个长内容的页面中，当滚动到一定的距离时，会出现一个 "返回顶部" 的图标，点击会平滑的返回到页面顶部，有助于提升用户体验。

HTML

<div class="backtop" @click="backtop" ref="top">TOP</div>

CSS

.backtop {
  position: fixed;
  bottom: 30px;
  right: 25px;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s;
}
.backtop:hover {
  opacity: 0.8;
  cursor: pointer;
}
.backtop.fade {
  opacity: 1;
  visibility: visible;
}

给scroll事件绑定逻辑

methods: {
    handleScrollEvent() {
      //backTop
      const target = this.$refs.top;
      if (scrollTop > 200 && !target.classList.contains("fade")) {
        target.classList.add("fade");
      }
      if (scrollTop < 200 && target.classList.contains("fade")) {
        target.classList.remove("fade");
      }
    },

在vue中使用防抖优化scroll

只要滚动页面就会不断的触发scroll事件，非常影响性能，所以选择防抖优化。
用户 scroll 和 resize 行为（即是滑动页面和改变窗口大小）会导致页面不断的重新渲染。

created() {
    this.scrollEvent = this.debounce(this.handleScrollEvent, 2000);
  },
methods: {
  debounce(fn, delay) {
      // console.log("debounce");
      let timeout = null;
      return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    },
}