vue函数防抖和节流

Vue函数防抖和节流https://zhuanlan.zhihu.com/p/72363385

<template>

 <div>

  <input type='text' v-model='value' @keydown = "hangleChange">

 </div>

</template>

<script>

function debounce(func, wait=1000){

 let timeout;

 return function(event){

  clearTimeout(timeout)

  timeout = setTimeout(()=>{

   func.call(this, event)

  },wait)

 }

}

export default{

 name:'',

 data(){

  return{

   value:''

  }

},

 methods:{

  hangleChange:debounce(function(e){

   console.log(this.value)

  })

 }

}

</script>

节流

<template>

 <div class="scroll" ref="previewText" @scroll.passive="fnScroll">

</template>

<script>

 export default{

  name:'globalHospot',

  data(){

    return{

      count:0,

      fnScroll:() =>{}

    }

  },

  methods: {

    fnHandleScroll (e) {

      console.log('scroll触发了：' + this.count++, new Date())

    },

    fnThrottle(fn, delay, atleast){  //节流函数

      let timer = null;

      let previous = null;

      return function(){

        let now = +new Date()

        if(!previous) previous = now;

        if(atleast && now - previous > atleast){

          fn();

          previous = now;

          clearTimeout(timer)

        }else{

          clearTimeout(timer)

          timer = setTimeout(()=>{

            fn();

            previous = null

          },delay)

        }

      }

    }

  },

  created(){

    this.fnScroll = this.fnThrottle(this.fnHandleScroll, 1000)  //刚创建时执行

  },

}

</script>

巴特西

vue函数防抖和节流

最新文章

热门文章