uniapp 中onPageScroll中使用防抖, 以及this获取问题

哎。本来我想着我的想法也没错。

onPageScroll: debounce((e) => {
    
    
	this.show = e.scrollTop > 800
}, 300),

但是一看报错就知道为什么了。因为this丢了。哎。大意了。好久没犯过this的相关问题了

这个时候 就不能用 箭头函数了。我之后把自己书写的防抖函数也去掉了箭头函数。这样才获取到this 才正式没问题

浏览器环境下,匿名函数默认的this是指向window,箭头函数本身没有自己的this,所以从所在环境的上层环境的this取得

防抖函数

// 防抖
export const debounce = (fn, time) => {
    
    
	let timer = null;
	return function(...args) {
    
    
		if(timer) {
    
    
			clearTimeout(timer);
		} 
		let ctx = this;
		timer = setTimeout(function() {
    
    
			timer = null;
			fn.apply(ctx, args);
		}, time)
	}
}

更改之后就是

onPageScroll: debounce(function(e) {
    
    
this.show = e.scrollTop > 800
}, 300),

滚动到高度 大于800的情况下 就出现一个浮层 我的需求就是这样了 但是不停的滚动计算对性能有有所消耗 就只能这样搞了

关注我 持续更新前端知识。

猜你喜欢

转载自blog.csdn.net/yunchong_zhao/article/details/122708601
今日推荐