Recently, we build a frontend website as a nginx docker image, before go live on production. We asking the security team
There are much difference between AWS Global and AWS China. The background of this blog is that I’m responsible for migr
In many real-world scenarios, cloud infrastructure is already in place before adopting infrastructure as code (IaC) solu
JavaScript作为一种强大而灵活的编程语言,为开发者提供了丰富的工具和功能。其中,生成器(Generators)是一项引人注目的特性,它们可以帮助我们在编写异步代码时更加轻松地管理流程和状态。本文将深入探讨JavaScript生成器的
在ES6(ECMAScript 2015)中引入了一种新的基本数据类型——Symbol。Symbol类型的引入丰富了JavaScript语言,为开发者提供了一种独一无二的标识符。本文将深入探讨Symbol的特性、用途以及代码示例。 1. S
In the rapidly evolving field of natural language processing (NLP), the quality and diversity of training data are cruci
防抖(Debouncing)是一种常用的优化技术,用于处理频繁触发的事件,如浏览器窗口的resize、input输入等。防抖的目标是在事件被触发后,等待一段时间,只执行一次事件处理函数,以避免频繁的重复操作。

Motto

Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful. - Albert Schweitzer

成功并不是幸福的关键。幸福是成功的关键。如果你热爱你正在做的事情,你将会成功。 - 阿尔伯特·施韦策

Recommend Articles

Recently, we build a frontend website as a nginx docker imag
Read More
There are much difference between AWS Global and AWS China.
Read More
In many real-world scenarios, cloud infrastructure is alread
Read More
在ES6(ECMAScript 2015)中引入了一种新的基本数据类型——Symbol。Symbol类型的引入丰富了Ja
Read More
In the rapidly evolving field of natural language processing
Read More

在前端开发中,防抖(Debouncing) 是一种常用的优化技术,用于处理频繁触发的事件,如浏览器窗口的resize、input输入等。防抖的目标是在事件被触发后,等待一段时间,只执行一次事件处理函数,以避免频繁的重复操作

防抖的原理很简单:当一个事件被触发时,立即设置一个定时器,在规定的时间内没有再次触发该事件时,执行事件处理函数。如果在定时器规定的时间内再次触发了事件,那么就清除前一个定时器,并重新设置新的定时器。这样,只有在事件停止触发一段时间后,才会执行事件处理函数。

以下是一个防抖的基本实现示例(使用 JavaScript):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function debounce(func, delay) {
let timer = null;
return function () {
const context = this;
const args = arguments;

clearTimeout(timer); // 每次执行时,清除之前的定时器
timer = setTimeout(function () { //设置新的定时器
func.apply(context, args);
}, delay);
}
}

const debounceFunction = debounce((args) => {
console.log("Debounce function called", args);
}, 500);

window.addEventListener('resize', debounceFunction);
Read More