heightMixins+防抖函数

export default {
  data() {
    return {
      tableHeight: null,
      resizeEvent: null
    }
  },
  mounted () {
    this.getTableHeight()
    this.resizeEvent = this.debounce(this.getTableHeight, 500)
    window.addEventListener('resize', this.resizeEvent)
  },
  activated() {
    window.addEventListener('resize', this.resizeEvent)
  },
  deactivated() {
    window.removeEventListener('resize', this.resizeEvent)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resizeEvent)
  },
  methods: {
    // 获取表格高度
    getTableHeight() {
      this.$nextTick(() => {
        // 屏幕可用工作区域高度 - 表格距离屏幕顶部高度 - 分页组件的高度
        this.tableHeight = window.innerHeight - document.getElementById(this.tableId).getBoundingClientRect().top - 70
      })
    },
    // 防止频繁调用方法
    debounce(fn, delay) {
      let timer
      return function () {
        let context = this
        let args = arguments
        clearTimeout(timer)
        timer = setTimeout(() => {
          fn.apply(context, args)
        }, delay)
      }
    }
  }
}

学习代码： 1、一个搜索输入框， 用户不停的进行输入（这个时候就是抖动的过程）， 等用户输入停止之后，再触发搜索

function debounce(fn, delay = 200) {
  let timer = 0
  return function() {
    // 如果这个函数已经被触发了
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

防抖是拖拽或者滚动结束之后才返回回调，但是我是需要在过程中进行触发回调，但是又不需要那么的频繁；这时候就使用节流函数，每隔一定的时间进项触发就好了！

// 节流函数
function throttle(fn, delay = 200) {
  let  timer = 0
  return function () {
    if(timer){
      return
    }
    timer = setTimeout(() =>{
      fn.apply(this, arguments); // 透传 this和参数
      timer = 0
    },delay)
  }
}

参考深入学习防抖节流：juejin.cn/post/710333…