vue+echarts点击事件防抖、节流

点击echarts柱状图触发接口，一段时间多次点击会不断地调用接口，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

点击事件：

    mounted() {
        // 图表点击空白处传递dataIndex出去
        let _this = this
        // 对click事件节流、防抖
        _this.chart.getZr().on('click', (param) => {
          let params = param
          _this.debounce(function(){
            let pointInPixel = [params.offsetX, params.offsetY]
            if(_this.chart.containPixel('grid', pointInPixel)) {
                let pointInGrid = _this.chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
                // 获取当前点击的dataIndex
                let xIndex = pointInGrid[0]
                _this.$emit('getIndex', xIndex)
            }
          },300)
        })
    },

设置全局变量：

    data() {
        return {
            flag: true,
            timeout: null
        }
    },

防抖节流方法：

methods: {
        // 节流
        throttle(fn, delay) {
          if (this.flag) {
            setTimeout(() => {
              fn.call(this)
              this.flag = true
            }, delay)
          }
          this.flag = false
        },
        // 防抖
        debounce(fn, delay) {
          if (this.timeout) {
            clearTimeout(this.timeout) // 规定时间内若定时器存在则清除
          }
          this.timeout = setTimeout(() => {
            fn.call(this)
          }, delay)
        }
    }

完成