vue函数防抖和节流

Posted 2022-10-15 minty

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>