Antivibración, función de estrangulamiento
1. ¿Qué es el anti-vibración de rebote?
La función de rebote permite que la función de devolución de llamada que proporcione se ejecute solo una vez en un intervalo determinado, lo que reduce su frecuencia de ejecución. Función antivibración (el resultado se mostrará después del tiempo establecido, los clics repetidos no son válidos, si se repiten los clics, el tiempo se volverá a calcular desde el momento del clic). En general, la función antivibración hace clic repetidamente dentro del tiempo especificado para volver a calcular el tiempo especificado, y solo el último clic es válido.
1. función de rebote
El código es el siguiente (ejemplo):
/**
* debounce 函数在给定的时间间隔内只允许你提供的回调函数执行一次，以此降低它的执行频率。
* @method 防抖函数(设定时间之后出结果，重复点击无效，如果重复点击，从点击的时刻,重新计算时间)
* @param func 目标函数
* @param wait 延迟执行毫秒数
*/
const debounce = (func, wait) => {
let _lastTime
return function() {
clearTimeout(_lastTime)
_lastTime = setTimeout(() => {
func.apply(this, arguments)
}, wait)
}
}
2. Cómo usar
El código es el siguiente (ejemplo): archivo html
<body>
<div id="app">
<button onclick="fun()">防抖</button>
</div>
</body>
<script>
var fun = debounce(function (){
console.log(111)
},1000)
</script>
El código es el siguiente (ejemplo): in vue
<template>
<div id="app">
<button @click="fun()">防抖</button>
</div>
</template>
<script>
export default {
methods: {
fun:debounce(function(){
console.log(111)
},1000)
}
}
</script>
2. ¿Qué es el acelerador?
Función de aceleración (solo puede hacer clic una vez dentro del tiempo establecido y se activará inmediatamente después de hacer clic. Hacer clic repetidamente no es válido y debe esperar hasta que se complete el tiempo establecido antes de ejecutar la segunda vez)
1. función del acelerador
El código es el siguiente (ejemplo):
/**
* @method 节流函数(设定时间之内只能点击一次，点击后立即触发，重复点击无效，必须等到设定时间执行完才执行第二次)
* @param func 函数
* @param wait 延迟执行毫秒数
*/
const throttle = (func, wait) => {
if (wait == null || wait == undefined) {
wait = 3000
}
let _lastTime = null
// 返回新的函数
return function() {
let _nowTime = +new Date()
if (_nowTime - _lastTime > wait || !_lastTime) {
func.apply(this, arguments) // 将this和参数传给原函数
_lastTime = _nowTime
}
}
}
2. Cómo usar
提示：同debounce防抖函数使用方式一样
Resumir
Este artículo es solo un ejemplo, y la aplicación real puede empaquetarse en un archivo js e importarse globalmente. Si hay algún error, ¡bienvenido a responder en el área de comentarios!