js 函数节流

//函数节流: 指定时间间隔内只会执行一次任务
//我们拿scroll来做列子

mounted(){
  window.addEventListener('scroll',this.throttle(this.windowScroll,300))  
},

methods:{

    //函数节流封装代码，参数method表示要执行的函数，delay表示要延迟的时间，单位为毫秒
    throttle(method, delay=500) {
      var timer = null;  //定时器句柄
      return function () {  //返回节流函数
        var context = this, args = arguments;  //上下文函数和参数对象
        clearTimeout(timer);  //先清理未执行的函数
        timer = setTimeout(function () {  //重新定义定时器，记录新的定时器句柄
          method.apply(context, args);  //执行预设的函数
        }, delay);
      }
    },

    windowScroll() {
      // 滚动条距离页面顶部的距离
      // 以下写法原生兼容
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||                         
      document.body.scrollTop;

      console.log(scrollTop);

      //this.scrollTopH = scrollTop
    },
}