若依 自适应+防抖 resize事件

元素添加了resize事件后，当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。

/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }
  
// resize.js

import { debounce } from '@/utils'

export default {
    data() {
        return {
            $_sidebarElm: null,//侧边栏
            $_resizeHandler: null//自适应函数
        }
    },
    mounted() {
        this.initListener()
    },
    activated() {
        if (!this.$_resizeHandler) {
            // avoid duplication init
            this.initListener()
        }

        // when keep-alive chart activated, auto resize
        this.resize()
    },
    //销毁前删除resize事件
    beforeDestroy() {
        this.destroyListener()
    },
    //销毁后删除resize事件
    deactivated() {
        this.destroyListener()
    },
    methods: {
        // use $_ for mixins properties
        // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
        $_sidebarResizeHandler(e) {
        //判断类名是否有width属性 -> 执行自适应函数
            if (e.propertyName === 'width') {
                this.$_resizeHandler()
            }
        },
        initListener() {
        //防抖
            this.$_resizeHandler = debounce(() => {
                this.resize()
            }, 100)
            //添加resize事件
            window.addEventListener('resize', this.$_resizeHandler)
            
            this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
            this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
        },
        //删除在resize事件
        destroyListener() {
            window.removeEventListener('resize', this.$_resizeHandler)
            this.$_resizeHandler = null

            this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
        },
        //触发 resize 事件 自适应浏览器宽度
        resize() {
            const { chart } = this
            chart && chart.resize()
        }
    }
}