VUE 中的 防抖&节流函数

data () {
    return {
      //  0 未执行 1 执行中
      canDo1: null,
      //  0 不可执行 1 可执行
      canDo2: 1
    }
  },
  methods: {
    // 防抖方法
    debounceFunc () {
      if (this.canDo1) {
        clearTimeout(this.canDo1)
      }
      this.canDo1 = setTimeout(() => {
        this.$message({
          type: 'success',
          message: '执行防抖',
          duration: 1200
        })
      }, 3000)
    },
    // 节流方法
    throttleFunc () {
      // 可执行
      if (this.canDo2) {
        this.canDo2 = 0
        setTimeout(() => {
          this.canDo2 = 1
          this.$message({
            type: 'success',
            message: '执行节流',
            duration: 1200
          })
        }, 5000)
      } else {
        return this.$message({
          type: 'error',
          message: '请不要多次点击',
          duration: 1200
        })
      }
    }
  }

感觉比原生的写法要简单  感觉写的不好 不能当公用方法复用... 再研究

posted on 2022-06-01 17:03  贲风  阅读(340)  评论(0)    收藏  举报