• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

防抖动

321 0

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
  • 本文分类:JavaScript
  • 本文标签:javascriptvue防抖动
  • 流行热度:已超过 321 人围观了本文
  • 最后更新:2020年12月21日 - 15时05分57秒
  • 发布日期:2020年12月21日 - 15时05分57秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码