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);
      }),