uniapp节流函数

最新推荐文章于 2025-04-24 11:50:01 发布

栖柚与苏璃

最新推荐文章于 2025-04-24 11:50:01 发布

阅读量603

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_73075579/article/details/131681148

版权

本文介绍了如何在uniapp中实现节流函数，详细讲解了arguments对象的使用，并提供了将arguments转换为数组的两种方法。接着展示了节流函数的完整代码，通过应用apply函数确保在规定时间内只执行一次。此外，还探讨了ES6的剩余参数...args的特性，包括其与arguments的区别以及如何影响函数的length属性。

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

节流函数：在规定时间内，无论函数被触发多少次，其对应的事件处理逻辑都只执行一次。

1.进入节流函数逻辑前，普及一下js的基本知识点-arguments对象。

arguments对象是function自带的属性，保存当前函数所传入的参数，是一个类数组对象。

以下通过uniapp简单举个例子：

export default {
	data() {
		return {

		}
	},
	onLoad() {
		this.outall(0, 1)
	},
	methods: {
		outall() {
			console.log(arguments)
		}
	}
}

其打印结果：

可以看到传入的参数已被保存，且可以通过arguments[0]的方式去调用保存的参数。

但是无法对arguments对象直接使用其他的数组方法，因为它并非是一个数组实例。

这里提供两个可以将arguments对象里所有参数转为数组的方法。

第一种：

export default {
	data() {
		return {

		}
	},
	onLoad() {
		this.outall(0, 1)
	},
	methods: {
		outall() {
			/*从数组原型链上提取slice方法来使用*/
			const slice = Array.prototype.slice
			/*通过call函数，指向arguments对象并传入参数值*/
			let arr = slice.call(arguments, 0)
			console.log(arr)
		}
	}
}

打印结果如下：

第二种：

export default {
	data() {
		return {

		}
	},
	onLoad() {
		this.outall(0, 1)
	},
	methods: {
		outall() {
			console.log("arguments的length：" + arguments.length)
			let arr = []
			for (let i = 0; i < arguments.length; i++) {
				arr.push(arguments[i])
			}
			console.log(arr)
		}
	}
}

打印结果如下：

两种方法其实差不多，都是利用arguments的length属性进行数组切片。

2.节流函数逻辑实现

完整代码如下：

js文件：

const throttle = (func, delay) => {
	let timer = null
	return function () {
		if (!timer) {
			timer = setTimeout(() => {
				func.apply(this, arguments)
				timer = null
			}, delay)
		}
	}
}
export default throttle

vue文件：

<template>
	<view class="all-page">
		<view class="wx-layout">
			<view class="wx-box" @click="apply(Math.random())">
				<text>节流</text>
			</view>
		</view>
	</view>
</template>

<script>
import throttle from "@/pages/property/js/throttle.js"
export default {
	data() {
		return {

		}
	},
	onLoad() {

	},
	methods: {
		apply: throttle(function (number) {
			console.log(number)
		}, 1000)
	}
}
</script>

<style lang="scss" scoped>
.all-page {
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
}

.wx-layout {
	width: 100%;
	box-sizing: border-box;
	padding-top: 100rpx;
	display: flex;
	justify-content: center;

	.wx-box {
		padding: 0 30rpx;
		height: 80rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		text-align: center;
		line-height: 76rpx;
		box-sizing: border-box;
		border: 2rpx solid #999999;
		border-radius: 16rpx;
	}
}
</style>

通过点击按钮调用，每秒控制台只能打印一次随机数。

其中apply函数的作用与call函数的作用大同小异，第一个参数可以指定方法执行时内部指针所引用的对象，不同点在于，call函数的传参只能一个个分别传入，但apply函数可以传入参数数组或arguments对象。

3.拓展ES6形参-...args

...args是ES6引入的新语法，作用类似于arguments对象，不同点在于其接收后得到的是一个真正的数组实例，...后是自定义的参数名，可以直接使用数组的原生方法。

示例：

export default {
	data() {
		return {

		}
	},
	onLoad() {
		this.outall(0, 1, 2, 3)
	},
	methods: {
		outall(...args) {
			console.log(args)
		}
	}
}

打印结果如下：

正式名称为剩余参数，有其独特的性质。

示例：


export default {
	data() {
		return {

		}
	},
	onLoad() {
		this.outall(0, 1, 2, 3)
	},
	methods: {
		outall(a, b, ...args) {
			console.log(a)
			console.log(b)
			console.log(args)
		}
	}
}

打印结果如下：

可以看出，剩余参数即全部参数中未与形参对应的剩下的参数。

同时，使用剩余参数后，函数的length属性会发生变化。

示例：

export default {
	data() {
		return {

		}
	},
	onLoad() {
		this.outall(0, 1, 2, 3)
		this.outalled(0, 1, 2, 3)
	},
	methods: {
		outall(a, b, ...args) {
			console.log(this.outall.length)
		},
		outalled(...args) {
			console.log(this.outalled.length)
		}
	}
}

打印结果如下：