uniapp项目实现节流操作

JavaScript节流函数实现与应用

原创已于 2023-05-19 21:39:03 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #vue.js

于 2023-05-14 12:47:29 首次发布

文章介绍了在JavaScript中如何实现节流函数，以解决函数频繁调用导致的性能问题。通过设置定时器，在规定时间内只执行一次事件处理函数，优化了代码执行效率。

函数被频繁调用时，会出现性能问题，此时就需要进行节流操作节流操作主要是在一定的时间内同一事件无论触发多少次，对应的事件处理函数都只是每间隔规定事件执行一次

下面封装了节流函数

可以在utils文件夹下新建throttle.js

 // 节流函数
const throttle=(func, delay) => {
	// 缓存一个定时器
	let timer = null
	// 这里返回的函数是每次实际调用的节流函数 
	return function(...args) {
		if (!timer) { //判断timer是否有值,如果没有则说明定时器不存在即可继续执行
			timer = setTimeout(() => { //关
				func.apply(this, arguments)
				timer = null; //开
			}, delay)
		}
	}
}
export default throttle

使用格式如下

<template>
<button @click="onTapItems(item,index)"></button>
<template>

<script>
import throttle from "/utils/throttle"
onTapItems: throttle(function(item,index){
				console.log(item,index);
			},500)
<script>