C# 函数防抖,简单易懂的防抖(Debounce)教程

.NET Standard 2.0 通用扩展库!开箱即用。
Nuget地址https://www.nuget.org/packages/Sesy
Gitee地址https://gitee.com/sesy/sesy

一、概念

函数防抖是一种常用的优化技术,用于限制函数短时间内频繁触发的情况。它通过延迟函数的执行,直到一定的时间间隔内没有新的触发事件发生,从而避免不必要的重复执行。防抖算法的核心思想是在触发事件后设置一个定时器,如果在定时器时间内再次触发事件,则重新计时,直到定时器时间结束后执行函数。这样可以有效地减少函数的执行次数,提升性能和用户体验,防抖算法通常用于处理用户输入、滚动事件等可能导致频繁触发的场景。

二、思维图

1.1 流程图

在这里插入图片描述

1.2 时序图

在这里插入图片描述

三、代码实现

/// <summary>
/// 防抖调度器 确保函数在一定时间间隔内以固定的频率执行
/// </summary>
public class DebounceDispatcher
{
	private Timer timer;

	/// <summary>
	/// 函数防抖
	/// </summary>
	/// <param name="action">需要执行的<see cref="Action"/></param>
	/// <param name="delay">时间间隔/毫秒</param>
	public void Debounce(Action action, int delay)
	{
		timer?.Dispose();
		timer = new Timer((_) =>
		{
			action?.Invoke();
		}, null, delay, Timeout.Infinite);
	}
}
static void Main(string[] args)
{
	DebounceDispatcher dispatcher = new DebounceDispatcher();
	// 连续调用10次 模拟 屏幕滚动事件 或 用户输入事件
	for (int i = 0; i < 10; i++)
	{
		// 防抖,等待100ms 延迟函数的执行,直到100ms内没有新的触发事件发生
		dispatcher.Debounce(() =>
		{
			Console.WriteLine(i);
		}, 100);
	}
	// 仅最后一次调用被执行,前几次调用都因100ms内有新的调用导致未执行。
	// 输出结果 10
	Console.Read();
}
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScript 函数防抖debounce)是一种技术,可以防止函数在短时间内多次触发。 当函数被触发时,防抖函数会延迟执行函数,并且如果在延迟期间内再次触发函数,则会重新计算延迟时间。这样可以避免函数在短时间内多次触发,从而节省资源。 举个例子,假设你有一个函数,用于搜索用户输入的内容。如果每次用户输入都立即触发函数,会导致函数频繁触发,浪费资源。使用防抖函数,可以在用户输入后延迟一段时间才触发函数,从而节省资源。 下面是一个简单防抖函数的例子: ``` function debounce(fn, delay) { let timer = null; return function () { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); } } ``` 上面的防抖函数接受两个参数:`fn` 是要进行防抖函数,`delay` 是延迟时间(单位为毫秒)。防抖函数返回一个新函数,在新函数中设置了延迟执行的逻辑。 使用防抖函数的方法如下: ``` const debouncedFunction = debounce(function () { // 在这里 ### 回答2: JavaScript 函数防抖是一种常用的优化技术,旨在减少函数的调用频率。 当一个函数被频繁触发时,防抖机制会在一定的延迟时间内,只执行最后一次触发的函数调用。这样可以避免函数被频繁执行,提高性能和用户体验。 实现函数防抖有两种方式:立即执行和延迟执行。 立即执行的函数防抖,意味着只有当函数被最后一次调用时,才会立即执行函数。延迟执行的函数防抖,意味着只有当函数在一定时间内没有被再次调用时,才会执行函数。 通过使用定时器和闭包,可以实现函数防抖的功能。当函数被触发时,先清除之前设置的定时器,然后重新设置一个延迟执行的定时器。如果在延迟时间内再次触发函数,就会清除之前设置的定时器,重新设置一个新的延迟执行的定时器。只有当延迟时间内没有再次触发函数,定时器才会执行函数函数防抖在多种场景中都有应用。比如在用户输入搜索框时,可以使用函数防抖来减少发送搜索请求的频率;在窗口大小改变时,可以使用函数防抖来优化页面重绘的性能。 总之,JavaScript 函数防抖是一种常用的优化技术,通过减少函数的调用频率来提高性能和用户体验。在实现上,可以通过定时器和闭包来实现函数防抖的功能。 ### 回答3: JavaScript函数防抖是一种提高性能和优化用户体验的技术。它所解决的问题是在一段时间内频繁触发某个函数时,只执行最后一次触发的函数调用。 实现函数防抖的方法是利用定时器。当触发事件时,会开始一个定时器,如果在指定的时间间隔内再次触发了该事件,定时器就会被清除并重新开始计时。这样,只有在最后一次触发事件后的等待时间内没有再次触发,才会执行相应的函数调用。 函数防抖在实际应用中有很多场景。比如,在用户输入搜索框时,可以利用函数防抖来减少发送请求的次数,只在用户停止输入一段时间后才发起实际的搜索请求。又如,在窗口大小调整时,可以利用函数防抖来优化响应式布局,只在窗口停止调整一段时间后才重新计算样式。 以下是一个简单的实现函数防抖的示例代码: ```javascript function debounce(func, delay) { let timerId; return function() { const context = this; const args = arguments; clearTimeout(timerId); timerId = setTimeout(function() { func.apply(context, args); }, delay); }; } // 创建一个防抖函数 const debouncedFunc = debounce(function() { console.log('Function debounced'); }, 300); // 触发函数 debouncedFunc(); // 不会执行 debouncedFunc(); // 不会执行 debouncedFunc(); // 不会执行 // 等待300毫秒后,只执行一次 ``` 以上示例代码中,`debounce`函数接受一个函数和一个延迟时间参数,返回一个新函数,实现了函数防抖的逻辑。在创建防抖函数后,多次调用这个函数,只有停止调用一段时间后才会执行实际的函数逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值