vue中使用防抖函数

公司有个需求需要获取到表格内的偏移量，然后跳转出去后返回回来还要回到原来的位置。如果只是普通的做法就是在mounted添加一个监听事件就行

　　 mounted() {
      let element = this.$refs.plTable;
      element.$el.addEventListener("scroll", this.handleScroll, true);
    },
    activated() {
      setTimeout(() => {
        this.$nextTick(() => {
          console.log(123);
          let element = this.$refs.plTable.$el;
          const tableBodyDom = element.querySelector('.el-table__body');
          console.log(tableBodyDom);
          tableBodyDom.parentNode.scrollTop = sessionStorage.getItem('scrollTop');
          console.log(sessionStorage.getItem('scrollTop'));
        });
      }, 10);
    },
　　 methods:{
    handleScroll(e){
        console.log(e);
        let element = this.$refs.plTable.$el;
        let parentNode = e[0].srcElement;
        const tableBodyDom = element.querySelector('.el-table__body');
        console.log('3-----------', tableBodyDom.offsetHeight); // 文档流的总高度;
        console.log("scroll:  ", parentNode.offsetHeight); // 当前DIV窗口的高度;
        console.log("scroll top:  " + parentNode.scrollTop + "px"); // 当前DIV滚动条距离顶部的高度;
　　　　//缓存 parentNode.scrollTop

} }

　　

优化方案：加入防抖函数，可以有效的减轻代码压力；

/*函数防抖*/
export function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 100;//间隔时间，如果interval不传，则默认1000ms
  return function() {
    clearTimeout(timer);
    var context = this;
    var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
    timer = setTimeout(function() {
      fn.call(context,args);
    }, gapTime);
  };
}

　　

加入防抖函数后；

import { debounce } from '@/common/js/utils.js';

      // 监听table组件滚动的高度
      handleScroll: debounce(function(e) {
        let element = this.$refs.plTable.$el;
        let parentNode = e[0].srcElement;
        const tableBodyDom = element.querySelector('.el-table__body');
        console.log(tableBodyDom.parentNode.scrollTop);
        console.log(tableBodyDom.parentNode.offsetTop);
        console.log('3-----------', tableBodyDom.offsetHeight); // 文档流的总高度;
        console.log("scroll:  ", parentNode.offsetHeight); // 当前DIV窗口的高度;
        console.log("scroll top:  " + parentNode.scrollTop + "px"); // 当前DIV滚动条距离顶部的高度;
        // this.scrollTop = parentNode.scrollTop;
        sessionStorage.setItem('scrollTop', parentNode.scrollTop);
      }),