uniapp:函数节流和防抖的使用

本文介绍了JavaScript中防抖(debounce)和节流(throttle)两种性能优化技术,通过实例展示了如何在事件监听中使用它们来限制函数调用频率,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

debounce: function(fun, delay) {
	return function(args) {
		let that = this;
		let _args = args;
		clearTimeout(fun.id);
		fun.id = setTimeout(() => {
			fun.call(that, _args)
		}, delay)
	}
}

节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

throttle: function(fn, delay) {
	let timer = true;
	return function(args) {
		let that = this;
		let _args = arguments;
		if(!timer){
		   return false;
		}
		timer = false;
		setTimeout(() => {
			fn.apply(that, _args)
			timer = true;
		}, delay)
	}
}

使用

click: debounce(function() {
    
    console.log('业务代码')

}, 3000)


click: throttle(function() {
    
    console.log('业务代码')

}, 3000)

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值