uni-app 函数节流 throttle

节流运用场景:
比如在 监听鼠标的滚动的时候,如果不加节流,只要滚动就会触发函数,耗费大量的性能,因此,节流就应运而生,以下是节流的代码(运用时间来实现节流)

//形参中的 fn ,是指自己根据需求写的方法
//delay , 是打算多久执行一次方法的时间
export const throttle = (fn,delay) => {
	//进入的时间,其实就是用户什么时候 触发 的 滚动条
	var enterTime = 0; 
	var gapTime = delay || 200; //间隔时间
	return function(){
		var context = this;
		//第一次 执行 return 里面的匿名函数方法的时间
		var backTime = new Date(); 
		// 用户 触发 到 执行是需要时间的,因此 如果 执行匿名函数方法的时间 减去 出发的时间 大于间隔的时间,就进行函数的触发;
		if(backTime - enterTime > gapTime){ 
			fn.apply(context,arguments);
			//把执行匿名函数方法的时间保存 到 触发的时间,以便 第二次运行函数
			enterTime = backTime 
		}
	}
}

运用:

//引入 
import {throttle} from '上面的代码你放在哪个js文件,就引入哪个文件'

//使用
onPageScroll:throttle((e) => {
		console.log(e);
	},1000)
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值