vue函数防抖和节流

标签：ttl   vue   this   val   name   call   art   ott   change   

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函数防抖和节流

标签：ttl   vue   this   val   name   call   art   ott   change   

原文地址：https://www.cnblogs.com/minty/p/11507396.html