vue防抖和节流

防抖函数的使用场景: 频繁触发、输入框搜索


<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>

节流函数的使用场景:频繁触发、onrize,onscroll滚动条


<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>

使用时可以放到公共函数里面,然后调用使用。如在utils/index.js文件里面写


// 防抖处理-立即执行
export function posDebounce(fn, t) {
let delay = t || 500
let flag = true
    let timer
    return function () {
        let args = arguments
        if(flag) {
        fn.apply(this, args)
        flag = false
        }
        clearTimeout(timer)
        timer = setTimeout(() => {
        flag = true
        }, delay)
    }
}

然后在vue页面调用

import { _Debounce } from '@/utils';

goShopDevBind:_Debounce(function(item) {
    console.log(this)
    console.log(item)    
}, 3000),
 
 

文字工具

转换工具

便民查询

开发工具

其它工具

随机推荐