vue项目中对于Scroll事件的节流优化

最新推荐文章于 2024-09-18 00:05:41 发布

JikelZhang

最新推荐文章于 2024-09-18 00:05:41 发布

阅读量1.1k

点赞数 1

分类专栏： Vue相关代码优化文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54902466/article/details/122959825

版权

Vue相关同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

代码优化

6 篇文章 0 订阅

订阅专栏

  methods: {
    throttle(fn, wait) { // 封装函数进行节流
      var timer = null;
      return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(context, args);
            timer = null;
          }, wait);
        }
      };
    },
    handle() { // 功能代码
      let scroll_height = document.documentElement.scrollTop || document.body.scrollTop
      scroll_height>=120 ? this.show = true : this.show = false
    }
  },
  mounted() { 
   window.addEventListener("scroll", this.throttle(this.handle, 300));
  },
  destroyed(){  // 这里运用毁灭生命周期 , 避免资源泄露和浪费
    window.removeEventListener("scroll", this.throttle(),false);
  },