Tools.js

/*
 * fun [function] 需要防抖的函数
 * delay [number] 毫秒,防抖期限值
 */
export function debounce(fun, delay = 300) {
  let timer;
  return function () {
    let ctx = this
    let args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      timer = null
      fun.apply(ctx, args)
    }, delay)
  }
}
/*
 * fun [function] 需要节流的函数
 * delay [number] 毫秒,节流期限值
 */
export function throttle(fun, interval = 300) {
    let last;
    let timer;
    return function () {
        let ctx = this
        let args = arguments
        let now = new Date()
        if (last && now - last < interval) {
          clearTimeout(timer)
          timer = setTimeout(function () {
            last = now
          }, interval)
        } else {
          last = now
          fun.apply(ctx, args)
        }
    }
}
//点击事件触发
<button @click="getCode">防抖</button>

import { debounce } from '../../utils/Tools'  在工具栏中引入防抖
 // 组件数据
  data() {
    return {
      value: '',
    }
  },
// 监听属性
  watch: {
    value() {
      this.check()
    }
  },
   // 组件方法
  methods: {
  	//监听触发
    check:debounce(function(e){
      this.getorderData()  //要使用防抖处理的函数方法
      console.log("防抖");
    },1500),
    //点击事件触发
    getCode:debounce(function(e){
      this.getorderData()  //要使用防抖处理的函数方法
      console.log("防抖");
    },1500),
  }
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐