concepto:
Función antirrebote: después de que se active un evento de alta frecuencia, la función solo se ejecutará una vez dentro de n segundos.Si el evento de alta frecuencia se activa nuevamente dentro de n segundos, el tiempo se volverá a calcular.
Limitación de funciones (throttle): los eventos de alta frecuencia se activan, pero solo se ejecutan una vez en n segundos, por lo que la limitación diluirá la frecuencia de ejecución de la función.
La función de aceleración (throttle) y la función de rebote (rebote) son para limitar la frecuencia de ejecución de la función para optimizar la velocidad de respuesta causada por la alta frecuencia de activación de la función que no puede seguir el ritmo de la frecuencia de activación, lo que resulta en un retraso, animación suspendida o fenómeno de congelación.
1. Función antivibración (rebote)
Método de implementación: establezca un método de llamada retrasada cada vez que se active un evento y cancele el método de llamada retrasada anterior
Desventaja: si el evento se activa continuamente dentro del intervalo de tiempo especificado, el método de llamada se retrasará continuamente
//防抖debounce代码：
function debounce(fn,delay) {
var timeout = null; // 创建一个标记用来存放定时器的返回值
return function (e) {
// 每当用户输入的时候把前一个 setTimeout clear 掉
clearTimeout(timeout);
// 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
// 处理函数
function handle() {
console.log('防抖：', Math.random());
}
//滚动事件
window.addEventListener('scroll', debounce(handle,500));
2. Función de estrangulamiento (acelerador)
Método de implementación: cada vez que se dispara un evento, si actualmente hay una función de retraso esperando ser ejecutada, regrese directamente
//节流throttle代码：
function throttle(fn,delay) {
let canRun = true; // 通过闭包保存一个标记
return function () {
// 在函数开头判断标记是否为true，不为true则return
if (!canRun) return;
// 立即设置为false
canRun = false;
// 将外部传入的函数的执行放在setTimeout中
setTimeout(() => {
// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
// 当定时器没有执行的时候标记永远是false，在开头被return掉
fn.apply(this, arguments);
canRun = true;
}, delay);
};
}
function sayHi(e) {
console.log('节流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi,500));