vue 处理防抖节流 没有封装，可以直接复制代码学习查看

下面展示一些 内联代码片。

<template>
  <div class="hello">
  </div>
</template>

<script>
// import func from '../../vue-temp/vue-editor-bridge'
// throttle 在某个时间段,无论触发多少次,我只认第一次
// 防抖 在某个时间段,无论触发多少次,我只认最后一次
export default {
  name: 'HelloWorld',
  data () {
    return {
      inputval: ''
    }
  },
  mounted() {
    // window.addEventListener('scroll',this.throttle(this.scroll,5000))
    // window.addEventListener('scroll',this.debouncing(this.scroll,2000))
    window.addEventListener('scroll',this.betterDebounce(this.scroll,2000))
  },
  methods:{
    inputBtn () {
      // this.throttle(this.inputV,1000)
    },
    inputV() {
      console.log(this.inputval)
    },
    // 节流
    throttle (fn,intrval) {
      // fn 回调函数,intrval:计时器
      let last = 0
      return function() {
        // 保存上下文
        let content = this
        // 参数
        let args = arguments
        let now = +new Date()
        if((now - last) > intrval) {
          last = now
          // console.log(1)
          // this.scroll()
          fn.apply(content,args)
        }
      }
    },
    // 防抖 如果一直滑动就会一直重启
    debouncing(fn,delay){
      let time = null
      return function(params) {
           // 保存上下文
        let content = this
        // 参数
        let args = arguments
        // 如果定时器启动就关闭计时器,重新启动定时器
        if(time) {
          clearTimeout(time)
        }
        time = setTimeout(() => {
           fn.apply(content,args)
        },delay)
      }
    },
    // 防抖+ 节流 超过指定时间必须执行
    betterDebounce (fn,delay) {
      let last =0
      let time = null
      // debugger
      return function () {
        
            // 保存上下文
        let content = this
        // 参数
        let args = arguments
        let now = +new Date()
        
        if((now-last ) < delay) {
          clearTimeout(time)
          time = setTimeout(() => {
            fn.apply(content,args)
            last = now
          },delay)
        } else {
          last = now
          fn.apply(content,args)
        }
      }

    },
    scroll () {
      console.log('滚动起来了...')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  height: 20000px;
  background-color: pink;
}
</style>

input写法

<template>
  <div class="hello">
  <input type="text" v-model="inputval" @input="inputBtn">
  </div>
</template>

<script>
// import func from '../../vue-temp/vue-editor-bridge'
// throttle 在某个时间段,无论触发多少次,我只认第一次
// 防抖 在某个时间段,无论触发多少次,我只认最后一次
function debounce(func, intrval=1000){ //可以放入项目中的公共方法中进行调用（鹅只是省事）

     // fn 回调函数,intrval:计时器
      let last = 0
      return function() {
        // 保存上下文
        let content = this
        // 参数
        let args = arguments
        let now = +new Date()
        if((now - last) > intrval) {
          last = now
          // console.log(1)
          // this.scroll()
          func.apply(content,args)
        }
 }

}
export default {
  
  name: 'HelloWorld',
  data () {
    return {
      inputval: ''
    }
  },
  mounted() {
    // window.addEventListener('scroll',this.throttle(this.scroll,5000))
    // window.addEventListener('scroll',this.debouncing(this.scroll,2000))
    // window.addEventListener('scroll',this.betterDebounce(this.scroll,2000))
  },
  methods:{
    // inputBtn () {
    //   this.throttle(this.inputV,1000)
    // },
      inputBtn:debounce(function(e){
           console.log(this.inputval)
      }),
   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  height: 20000px;
  background-color: pink;
}
</style>

本文地址：https://blog.csdn.net/weixin_44952708/article/details/107314411