木灵鱼儿

木灵鱼儿

阅读:515

最后更新:2020/12/21/ 15:05:57

防抖动

js里面的防抖动,就是当一个函数不断被触发,但是实际有效值是最后一次的时候,为了节省资源,提高性能,让这个函数只触发最后一次。

比如常见的resize事件,scroll事件,非常典型的一个重复触发,有效的是最后一次。

那么怎么做呢?

function debounce(fn, delay) {
  // 维护一个 timer
  let timer = null;
 
  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
 
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

这个就是一个防抖动函数的封装。

使用时:

function test() {
  console.log("触发了")
}

window.addEventListener("scroll", test, false);

这是一般情况我们使用,暂时还没有使用防抖动,多以test会在一次滚动事件里,触发很多次。

使用防抖动:

function test() {
  console.log("触发了")
}

const test2 = debounce(test,100);

window.addEventListener("scroll", test2, false);

这样写,在一次事件中我们只会触发一次。

注意:

必须对防抖动函数创建一个变量保存,并且要先运行防抖动函数,拿到防抖动函数返回的匿名函数。

_变量保存_:用于事件清除,匿名函数无法被清除

_先运行_:不运行等于每次都是新的匿名函数,防抖动无效

vue里面使用

vue里面使用除了像上面那边,用一个变量保存,还可以这样:

<script>
export default {
  methods:{
    //防抖动函数
    debounce(fn, delay) {
      // 维护一个 timer
      let timer = null;
     
      return function() {
        // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
        let context = this;
        let args = arguments;
     
        clearTimeout(timer);
        timer = setTimeout(function() {
          fn.apply(context, args);
        }, delay);
      }
    },
    test(){
      console.log("运行了");
    }
  },
  created() {
    //防抖动
    this.test= this.debounce(this.test, 100);
  },
  mounted(){
    window.addEventListener("scroll", this.test, false);
  }
}
</script>

我们可以在创建的时候对test方法复写一次,这样就省去创建一次变量了。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 515

相关文章