Tabla de contenido
1.4 Código antivibración de desgarro de mano
2.1 Introducción a la aceleración
2.4 Código de limitación manual (método: marca de tiempo y temporizador)
2.5 La diferencia entre la implementación de marca de tiempo y temporizador
Capítulo 1 Antivibración
1.1 Introducción al rebote
- Escenario: El usuario hace clic con frecuencia para ejecutar una función/evento durante un período de tiempo. Durante este período, el usuario hace clic una vez y el temporizador se vuelve a cronometrar . Cuando el usuario no activa la función/evento durante este período, la función /event se ejecutará al final de este período.
- Ejemplo de aplicación de comprensión: El regreso a la ciudad se interrumpe y el jugador tiene sangre residual para prepararse para regresar a la ciudad. Se necesitan 3 segundos para que el regreso a la ciudad sea exitoso, pero durante este proceso de 3 segundos, el jugador hace clic en Regrese a la ciudad nuevamente, lo que hace que se vuelvan a calcular los 3 de regreso a la ciudad y espere otros 3 segundos.
1.2 Escenarios de aplicación
- Botones/eventos como iniciar sesión, enviar mensajes de texto y enviar solicitudes de publicación evitan que los usuarios hagan clic demasiado rápido y envíen múltiples solicitudes. Se requiere antivibración y se puede enviar la última solicitud;
- Al cambiar el tamaño de la ventana del navegador , el tiempo de cambio de tamaño es demasiado frecuente, lo que resulta en demasiados cálculos. En este momento, es necesario hacerlo de una vez, por lo que se usa anti-vibración;
- El cuadro de entrada obtiene el valor una vez sin ingresar un carácter. Puede usar anti-vibración para obtener el valor una vez completada la entrada.
- El editor de texto guarda en tiempo real y guarda después de un segundo sin ningún cambio.
- ……
1.3 Ideas de implementación
1.4 Código antivibración de desgarro de mano
function debounce(func,delay) {
// 定义一个定时器timer
let timer = null
return function() {
const that = this
const args = arguments
// 防抖核心：每次触发事件计时器都会重新计时
clearTimeout(timer)
timer = setTimeout(()=>{
func.apply(that,args)
},delay)
}
}- ejemplo:
Cuando no se llama a la función anti-vibración: cada vez que el usuario ingresa/elimina un valor en la entrada, se generará un valor;
<input type="text" id="input">
<script>
let inputDom = document.getElementById('input')
//获取输入框的输入内容
inputDom.oninput = function(){
console.log('this.value',this.value)
}
</script> 
Después de llamar a la función anti-vibración: se generará un valor después de que el usuario ingrese/elimine un valor de retraso.
let inputDom = document.getElementById('input')
//func 是执行函数，delay 是事件执行的延迟时间，毫秒
function debounce(func,delay) {
// 定义一个定时器timer
let timer = null
return function() {
const that = this
const args = arguments
// 防抖核心：每次触发事件计时器都会重新计时
clearTimeout(timer)
timer = setTimeout(()=>{
func.apply(that,args)
},delay)
}
}
function handler() {
console.log('this.value',this.value)
}
inputDom.addEventListener('input', debounce(handler, 1000))
Flujo del capítulo 2
2.1 Introducción a la aceleración
- Escenario : el usuario hace clic con frecuencia para ejecutar una función/evento durante un período de tiempo. Durante este período, el usuario hace clic una o varias veces (llamando al evento) sin afectar la ejecución del temporizador, y la función/evento solo se ejecuta una vez.
- Ejemplo de comprensión de aplicación: durante el tiempo de recuperación de la habilidad , el jugador usó la habilidad flash bajo ciertas circunstancias, pero el tiempo de recuperación de esta habilidad es de 120 s. Durante este período, el jugador encontró peligro y quiso usar la habilidad flash nuevamente. pero es inútil, el flash no se ejecutará, el temporizador aún está en cuenta regresiva y no podrás usar la habilidad de flash nuevamente hasta que la cuenta regresiva de 120 llegue a 0.
2.2 Escenarios de aplicación
- ajuste de ventana
- Desplazamiento de página
- Compras de pánico y clics locos
- Carga diferida para obtener la posición de la barra de desplazamiento
- El mouse activa continuamente un evento (como un clic) y solo lo activa una vez dentro de un tiempo específico.
- ……
2.3 Ideas de implementación
2.4 Código de limitación manual (método: marca de tiempo y temporizador)
// ---------------------节流1:使用时间戳---------------------
//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
function throttle (func, delay) {
//定义初始时间(开始触发事件的时间)
let start = 0;
return function () {
const that = this
const args = arguments
// 获取当前时间戳
let cur =Date.now()
// 时间间隔大于延迟时间则进入
if (cur - start >= delay) {
//执行事件处理程序
func.apply(that, args);
//更新初始时间
start = cur
}
}
}// ---------------------节流2:使用定时器---------------------
//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
function throttle(func, delay){
// 自定义一个定时器
var timer = null;
return function(){
var that = this;
var args = arguments
// timer为null表示可以发送请求了，否则还在请求中，不执行事件
if(!timer){
timer = setTimeout(function(){
//执行事件处理程序
func.call(that, args)
//事件执行完后把定时器清除掉，下次触发事件的时候再设置
timer = null;
}, delay)
}
}
}- ejemplo:
Cuando no se llama a la función de limitación, cada vez que se hace clic en el botón, se ejecutará una llamada de función:
<button id="button1">发送了节流请求</button>const button1Dom = document.getElementById('button1')
button1Dom.addEventListener('click',function(){
console.log("节流：我发送了消息")
})
Después de usar la función de limitación, si hace clic para enviar una solicitud con frecuencia, se enviará nuevamente después de que expire el temporizador. Después de hacer clic para enviar una solicitud durante este período, no se enviarán más solicitudes:
const button1Dom = document.getElementById('button1')
// ---------------------节流1:使用时间戳---------------------
//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
function throttle (func, delay) {
//定义初始时间(开始触发事件的时间)
let start = 0;
return function () {
const that = this
const args = arguments
// 获取当前时间戳
let cur =Date.now()
// 时间间隔大于延迟时间则进入
if (cur - start >= delay) {
//执行事件处理程序
func.apply(that, args);
//更新初始时间
start = cur
}
}
}
// ---------------------节流2:使用定时器---------------------
//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
// function throttle(func, delay){
// // 自定义一个定时器
// var timer = null;
// return function(){
// var that = this;
// var args = arguments
// // timer为null表示可以发送请求了，否则还在请求中，不执行事件
// if(!timer){
// timer = setTimeout(function(){
// //执行事件处理程序
// func.call(that, args)
// //事件执行完后把定时器清除掉，下次触发事件的时候再设置
// timer = null;
// }, delay)
// }
// }
// }
button1Dom.addEventListener('click',throttle(function(){
console.log("节流：我发送了消息")
},1000))Los clics frecuentes reducen la frecuencia de envío:
2.5 La diferencia entre la implementación de marca de tiempo y temporizador
La diferencia más obvia es que cuando hace clic con frecuencia, encontrará que la limitación mediante marcas de tiempo se ejecutará inmediatamente cuando se llame , mientras que el uso de temporizadores se ejecutará al final del período de tiempo.
Resumen del Capítulo 3
- El llamado anti-vibración significa que después de que se activa el evento, la función no se ejecutará hasta n segundos. Si el evento se activa nuevamente dentro de n segundos, se volverá a calcular el tiempo de ejecución de la función; la limitación significa que el evento se activa continuamente, pero dentro de n segundos La función solo se ejecuta una vez.
- La limitación de funciones garantizará que la función de procesamiento de eventos real se ejecute una vez dentro del tiempo especificado sin importar la frecuencia con la que se active el evento, mientras que la función antivibración solo activa la función una vez después del último evento.