//函数节流: 指定时间间隔内只会执行一次任务
//我们拿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
},
}