js 函数节流的一些小知识

本文深入探讨了函数节流的概念,解释了为何在频繁触发事件的场景下需要使用函数节流,以避免资源浪费和性能下降。通过定时器和时间戳两种方案详细介绍了函数节流的实现方式,并提供代码示例帮助理解。

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

一,什么是函数节流

概念:限制一个函数在一定时间内只能执行一次。

举个例子,坐火车或地铁,过安检的时候,在一定时间(例如10秒)内,只允许一个乘客通过安检入口,以配合安检人员完成安检工作。上例中,每10秒内,仅允许一位乘客通过,分析可知,“函数节流”的要点在于,在 一定时间 之内,限制 一个动作  执行一次 

二,为什么需要函数节流

原因:

开发过程中,有一些事件或者函数,会被频繁地触发(短时间按内多次触发),最常见的例如,onresizescrollmousemove ,mousehover 等,这些事件的触发频率很高,不做限制的话,有可能一秒之内执行几十次、几百次,如果在这些函数内部执行了其他函数,尤其是执行了操作 DOM 的函数(浏览器操作 DOM 是很耗费性能的),那不仅会造成计算机资源的浪费,还会降低程序运行速度,甚至造成浏览器卡死、崩溃。这种问题显然是致命的。

三,函数节流如何解决上述问题

主要实现思路就是通过 setTimeout 定时器,通过设置延时时间,在第一次调用时,创建定时器,先设定一个变量true,写入需要执行的函数。第二次执行这个函数时,会判断变量是否true,是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下次判断变量时则为false,函数会依次运行。目的在于在一定的时间内,保证多次函数的请求只执行最后一次调用。

四,代码实现函数节流

/ 时间戳方案
function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}

function handle(){
    console.log(Math.random());
}
    
// 定时器方案
function throttle(fn,wait){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
    
function handle(){
    console.log(Math.random());
}

第三种方案,代码实现如下,代码健壮性更强一些
const throttle = (func, time = 17,
				options = {
					leading: true,
					trailing: false,
					context: null
				}) => {

				let previous = new Date(0).getTime()
				let timer;
				const _throttle = function(...args) {
					let now = new Date().getTime();
					console.log(now - previous)
					if (!options.leading) {
						if (timer) return;
						timer = setTimeout(() => {
							timer = null;
							func.apply(options.context, args)
						}, time)
					} else if (now - previous > time) {
						func.apply(options.context, args)
						previous = now;
					} else if (options.trailing) {
						clearTimeout(timer)
						timer = setTimeout(() => {
							func.apply(options.context, args)
						}, time)
					}
				}
				_throttle.cancel = () => {
					previous = 0;
					clearTimeout(timer);
					timer = null;
				}
				return _throttle;
			}

             let fn = () => {
				console.log('boom')
			}
			let myThrottle = throttle(fn, 10000);

			function toSave() {
				myThrottle();
			}

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xvzhengyang

感谢,励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值