debounceEs una técnica para limitar la frecuencia de ejecución de la función. Puede retrasar la ejecución de la función durante un período de tiempo después de que se active el evento. Si el evento se activa nuevamente dentro de este tiempo, el temporizador anterior se borrará y se reiniciará. Esto puede controlar efectivamente los tiempos de ejecución de la función y evitar la ejecución frecuente.
debounceEl principio es utilizar la función setTimeoutde suma clearTimeoutpara retrasar la ejecución de la función a través del temporizador y borrar el temporizador anterior dentro del tiempo especificado para realizar el control de la llamada de función.
Cuando se usa en Vue debounce, cada vez que se activa una función, el temporizador anterior se cancelará y se volverá a programar durante un período de tiempo. Solo cuando la función no se active nuevamente dentro de un cierto período de tiempo, la función realmente se ejecutará. Esto puede evitar problemas como bloqueos de página causados por frecuentes llamadas a funciones cuando los usuarios operan rápidamente.
Ahora, veamos cómo usarlo en Vue debounce.
-
Primero, instale la biblioteca Lodash. Lodash es una biblioteca de utilidades de JavaScript que proporciona muchos métodos y funciones de uso común, incluidos
debounce. Se puede instalar usando administradores de paquetes como npm o yarn.
npm install --save lodash
-
Introducir la librería Lodash en los componentes a utilizar y
_asignarla a una variable
import _ from 'lodash'
-
En el método que debe usarse
debounce,_.debounceajuste el método con una función. Por ejemplo:
methods: {
search: _.debounce(function() {
// 搜索逻辑
}, 500)
}
En el ejemplo anterior, searchla ejecución del método se retrasará en milisegundos 500. Si se vuelve a llamar al método durante este tiempo, la última llamada se cancelará y se reiniciará.
Aquí hay una debounceimplementación de función simple:
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);
};
}
En esta implementación, usamos cierres para guardar variables timerpara registrar la ID del temporizador. Cada vez que se llama, el temporizador anterior se borra y se restablece un nuevo temporizador, y la función entrante se ejecuta después de un cierto retraso de tiempo.
La implementación en Vue debouncetambién es similar y su código fuente es el siguiente (extraído de la documentación oficial de Vue):
// from Vue.js 2.x source code
function _createFnInvoker(fn) {
function invoker() {
const args = arguments;
const vm = invoker.vm;
if (vm._isMounted) {
// 如果已经挂载，则立即执行传入的函数
return fn.apply(vm, args);
}
// 否则将函数作为一个 watcher 加入到队列中等待执行
vm.$nextTick(() => {
if (!invoker.canceled) {
fn.apply(vm, args);
}
});
}
invoker.cancel = () => {
invoker.canceled = true;
};
return invoker;
}
export function debounceAndMerge(fn) {
const invoker = _createFnInvoker(fn);
return function(...args) {
// 每次被触发时，都取消之前的计时器
invoker.cancel();
// 使用 setTimeout 延迟执行函数
window.setTimeout(() => {
invoker.apply(invoker, args);
}, 0);
};
}
Las funciones en Vue debounceAndMergese implementan de manera similar y también usan cierres para guardar el estado de las llamadas a funciones. Cada vez que se activa, el temporizador establecido anteriormente se cancelará primero y se configurará un nuevo temporizador para ejecutar la función entrante después de un retraso durante un período de tiempo. Si la función se activa nuevamente dentro de este tiempo, el temporizador anterior se cancela y el temporizador se reinicia.
Cabe señalar que cuando se usa en Vue debounceAndMerge, la función entrante se encapsulará en un observador y luego se agregará a la cola para su ejecución, en lugar de llamar directamente a la función de ejecución. Esto se debe a que Vue es un marco basado en el principio de capacidad de respuesta, y la vista debe volver a representarse después de que los datos cambien. Por lo tanto, encapsular la función en un observador puede garantizar que la operación correspondiente se realice después de que los datos se actualicen para evitar situaciones inesperadas.