木灵鱼儿

木灵鱼儿

阅读：879

最后更新：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方法复写一次，这样就省去创建一次变量了。

文章分类 JavaScript
文章标签 javascriptvue防抖动
木灵鱼儿

木灵鱼儿

发布了 585 篇文章获得点赞 0获得阅读 879

版权申明

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

one
two
three

关于作者

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

相关文章

transform 知识补充transform 知识补充
grid布局grid布局
meta name= viewport 知识补充meta name= viewport 知识补充
flex布局知识补充flex布局知识补充
vue cli3-cli4 打包后项目在二级路径的方法vue cli3-cli4 打包后项目在二级路径的方法