js 节流 throttle

最新推荐文章于 2024-04-06 07:30:00 发布

霂沁

最新推荐文章于 2024-04-06 07:30:00 发布

阅读量107

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41646185/article/details/123659175

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了一种JavaScript节流函数实现，用于限制在指定延迟后执行函数，并结合处理频繁点击的策略。通过`throttle`函数，确保在用户操作间隔足够大时执行回调，同时提供参数控制防频繁点击次数和处理函数的使用。

摘要由CSDN通过智能技术生成

js节流函数 + 频繁点击处理

/**
 * @param {Function} fn 节流的事件函数
 * @param {Number} delay 延时一定时间
 * @param {Function} handleFn 频繁点击处理函数
 * @param {Number} frequency 一定时间内 点击几次 触发处理函数
 */
function throttle (fn, delay = 500, handleFn, frequency = 3) {
	let last = 0;	// 上一次点击时间
	let hits = 0;	// 点击次数
	return function (...args) {
		const now = Date.now();
		if (now - last > delay) {
			fn.apply(this, args);	// 和上一次点击时间差大于delay500ms, 才执行函数
			last = now;
			hits = 0;
		}
		hits++;
		if (hits == frequency && typeof(handleFn) === 'function') {
			handleFn.apply(this, args);
		}
	}
}