防抖函数的原理:

只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次;

使用场景:

防抖函数一般是用于频繁触发事件,而我们只需要它触发一次的场景,比如:输入框的oninput事件、button按钮点击事件、点赞等操作场景;

实例:

例如在vue-cli脚手架中使用防抖函数来进行提升性能
vue-cli:
定义一个util.js

// 函数防抖
export function debounce(fn, wait) {
    let timeout = null;
    wait = wait || 600;
    return function () {
      let that = this;
      if(timeout !== null)   clearTimeout(timeout);  
      timeout = setTimeout(() => {
        fn.apply(that);
      }, wait);
    }    
}

(注意:我们在vue-cli中自定义方法必须要export抛出,不然组件读取不到)

使用和引用组件:
import {debounce} from "@/utils/utils"
调用方法:
methods: {
      inputNum: debounce(function(){
          console.log(1111);
      }, 1000)
  }
Logo

前往低代码交流专区

更多推荐