Vue: antirrebote y aceleración con Lodash

Dirección de demostración de GitHub

vista previa en línea

Sitio web oficial de Lodash

referencia:

Introducción detallada de Vue anti-shake and throttling
Vue implementa elegantemente anti-shake
and throttling Introducción de
anti-shake and throttling El principio de realización y escenarios de aplicación de
js anti-shake and throttling

¿Qué es antivibración y estrangulamiento?

La función de aceleración (acelerador) y la función anti-vibración (rebote) son ambas 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 mantenerse al día con la frecuencia de activación, retraso, animación suspendida o congelación
Un esquema de optimización para desencadenar eventos con frecuencia.

Antivibración (rebote)

Anti-vibración es para evitar sacudidas y evitar la activación repetida de eventos.
Anti-vibración se puede resumir como que después de que se activa un evento de alta frecuencia, la función solo se ejecutará una vez dentro de n segundos.Si el evento de alta frecuencia se dispara nuevamente dentro de n segundos, el tiempo se volverá a calcular.
Ejecuta el evento después de n segundos. Si se activa repetidamente después de n segundos, el tiempo se reiniciará. En
pocas palabras, si un evento se activa varias veces seguidas y rápidamente, solo se ejecutará el último.

• 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
• Si el evento se activa continuamente dentro del intervalo de tiempo especificado, el método de llamada se retrasará continuamente

Escenas a utilizar

• entrada Entrada de búsqueda, el usuario ingresa continuamente el valor
• la ventana activa el evento de cambio de tamaño
• mousemove evento de deslizamiento del mouse
• Desplácese por la solicitud de deslizamiento de la barra de desplazamiento, tire hacia arriba y hacia abajo para cargar más
• Validación de formulario, evento de envío de botón

acelerador

La limitación es para reducir el tráfico, reducir los eventos desencadenados con frecuencia y ejecutarlos a intervalos regulares. Controlará la frecuencia con la que se activa el evento. Por lo tanto, la limitación diluirá la frecuencia de ejecución de la función.
Solo se ejecuta una vez dentro de n segundos, y si se activa repetidamente dentro de n segundos, solo tendrá efecto una vez.
Si se activa varias veces en rápida sucesión, solo se activará una vez dentro del tiempo especificado. Si está limitado a 1 s, solo se ejecutará una vez dentro de 1 s, y pase lo que pase, la operación correspondiente se ejecutará dentro de 1 s.

• 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
• Si el evento se activa continuamente dentro del intervalo de tiempo especificado, el método de llamada se ejecutará una vez dentro del intervalo de tiempo especificado

Escenas a utilizar

• obtener código de verificación
• Se hace clic en el mouse continuamente para activar, mousedown (activado solo una vez dentro del tiempo especificado)
• mousemove evento de deslizamiento del mouse
• Solicitud de deslizamiento de la barra de desplazamiento, tire hacia arriba y hacia abajo para cargar más
• Funciones de botón como buscar, enviar, etc.

Diferencia entre estabilización y estrangulamiento:

Mismo punto:

• Ambos se pueden lograr usando setTimeout
• El propósito es reducir la frecuencia de ejecución de la función de devolución de llamada y ahorrar recursos informáticos.

diferencia:

• Anti-shake consiste en procesar la devolución de llamada después de un período de operación continua, usando clearTimout y setTimeout para lograrlo.

• La limitación es una operación continua que se ejecuta solo una vez por período de tiempo y se utiliza en eventos con una frecuencia más alta para mejorar el rendimiento.

• Anti-shake se utiliza para el comportamiento activo impredecible del usuario, como el contenido de entrada del usuario en los resultados de búsqueda dinámicos en el servidor. La velocidad de escritura del usuario es impredecible e irregular.

• La limitación se puede usar para algunos comportamientos activos que no son del usuario o comportamientos activos predecibles del usuario, como enviar una solicitud de punto oculto cuando el usuario desliza la ventana del producto, y la altura fija deslizante es una lógica conocida y tiene regularidad.

• La antivibración se centra en el último desencadenante del evento, mientras que la limitación solo se ejecuta una vez dentro de un tiempo específico.

• Anti-shake es convertir múltiples ejecuciones en la última ejecución, y throttling es convertir múltiples ejecuciones en ejecución a intervalos.

Utilidades anti-vibración y estrangulamiento

/**
 * 防抖  (传入所要防抖的方法/回调与延迟时间)
 * @param {Function} func
 * @param {number} delay
 * @return {*}
 */
export function debounce2(func, delay) {
    
    
  let timer = null
  // 借助闭包，使得变量timer不被回收
  return function() {
    
    
    // 保存当前环境下的实例对象，this即为引入该方法的那个组件实例对象
    const th = this
    // 保存传入参数
    const args = arguments
    // 第一次timer为null，跳过该判断，执行setTimeout()
    if (timer) {
    
    
      // 之后如果timer存在，则把上一次的销毁，也就是setTimeout()，则里面的函数执行也会抛弃
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
    
    
      // apply()，改变this指向，指向正在操作的组件实例，传入参数
      func.apply(th, args)
      timer = null
    }, delay)
  }
}

/*
  由于使用闭包，使得timer不被回收，在A组件中每次调用该方法时会去判断timer是否存在，如果存在，
  表示上一次输入在等待执行fn()，期间如果继续输入，且在1s内，则会把上一次未执行的（setTimeout中的）fn()销毁，
  重新定时1s，以此来达到输入结束过1s才执行fn()，即触发事件或者发送请求。
*/

/**
 * 节流  (传入所要节流的方法/回调与延迟时间)
 * @param {Function} func
 * @param {number} delay
 * @return {*}
 */
export function throttle(func, delay) {
    
    
  let flag = true
  return function() {
    
    
    const th = this
    const args = arguments
    if (!flag) {
    
    
      // 未超过时间间隔，flag无效，不执行fn
      return false
    }
    func.apply(th, args)
    flag = false // 在时间间隔内把状态位flag设为无效（false）
    setTimeout(() => {
    
    
      flag = true // 超过时间间隔把状态位flag设为有效（true）
    }, delay)
  }
}

Instalación de Lodash

Entorno del navegador:

<script src="lodash.js"></script>

vía npm:

$ npm i -g npm
$ npm i --save lodash

debouncedDocumentación de la función de rebote de Lodash Documentación
de la función de regulación de Lodashthrottle

Antivibración y estrangulamiento con Lodash

Cuando no se procesa, se activará un evento cuando cambie el texto de entrada, o se activará un evento una vez que se haga clic

Después del procesamiento,
el antivibración utilizado para la entrada de texto, el intervalo establecido de 0,5 segundos, los clics múltiples solo se activarán en la última vez. La
aceleración utilizada al hacer clic en el botón de consulta, el intervalo establecido de 3 segundos, solo se activará una vez dentro de los 3 segundos después de varios clics

Código de tecla anti-vibración

 <el-input v-model="queryParams2.name" maxlength="20" placeholder="请输入" 
 clearable @input="onChange2" @keyup.enter.native="onSearch2" />

// lodash文档： https://www.lodashjs.com/
//
// 搜索框防抖 - lodash实现
// 不要在debounce里写箭头函数，否则this的指向就是undefined，而不是Vue实例对象。
// 注意这里若是使用箭头函数的话， this为 undefined https://github.com/vue-styleguidist/vue-docgen-api/issues/23
onChange2: lodash.debounce(function() {
    
    
  // Do some things
  this.getListByKeyword()
}, 500),
getListByKeyword() {
    
    
  // 请求...
  console.log('根据关键字 请求...')
  console.log(this.queryParams2.name)
  console.log(JSON.stringify(this.queryParams2))
},

Código de clave de limitación - Vía 1

<el-button class="spp-form-btn" size="small" type="primary" @click="onSearch2()">查询</el-button>

 // 按钮节流 - lodash实现 - 方式1
 onSearch2: lodash.throttle(function() {
    
    
   // Do some things
   this.requestList()
 }, 3000),
 requestList() {
    
    
   // 请求...
   console.log('点击搜索按钮 请求...')
   console.log(JSON.stringify(this.queryParams2))
 },

Código de clave de limitación - Modo 2

 <el-button class="spp-form-btn" size="small" type="primary" style="width: 120px;" 
 @click="onSearch22()">查询（方式2）</el-button>

created() {
    
    
  // 按钮节流 - lodash实现 - 方式2
  this.onSearch22 = lodash.throttle(this.onSearch22, 3000)
},

requestList() {
    
    
  // 请求...
  console.log('点击搜索按钮 请求...')
  console.log(JSON.stringify(this.queryParams2))
},
// 按钮节流 - lodash实现 - 方式2
onSearch22() {
    
    
  // Do some things
  this.requestList3()
},

todos los códigos

<template>

  <div class="spp-theme-body spp-theme-pad">
  
    <h1 style="margin:10px 0px 30px;">防抖与节流</h1>
    
    <div> 未处理前 </div>
    <el-form :inline="true" size="small" :model="queryParams" class="spp-form-search spp-theme-top">
      <el-form-item>
        <span class="spp-form-label" style="width:80px">
          <i class="icon" /><i class="label">名称:</i>
        </span>
        <el-input v-model="queryParams.name" maxlength="20" placeholder="请输入" clearable @input="onChange" @keyup.enter.native="onSearch" />
      </el-form-item>
      <el-form-item>
        <el-button class="spp-form-btn" size="small" type="primary" @click="onSearch()">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="spp-theme-top"> lodash实现 - 搜索框防抖（0.5秒） / 点击按钮节流（3秒内） </div>
    <el-form :inline="true" size="small" :model="queryParams2" class="spp-form-search spp-theme-top">
      <el-form-item>
        <span class="spp-form-label" style="width:80px">
          <i class="icon" /><i class="label">名称:</i>
        </span>
        <el-input v-model="queryParams2.name" maxlength="20" placeholder="请输入" clearable @input="onChange2" @keyup.enter.native="onSearch2" />
      </el-form-item>
      <el-form-item>
        <el-button class="spp-form-btn" size="small" type="primary" @click="onSearch2()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="spp-form-btn" size="small" type="primary" style="width: 120px;" @click="onSearch22()">查询（方式2）</el-button>
      </el-form-item>
    </el-form>

    <div class="spp-theme-top"> utils实现 - 搜索框防抖（0.5秒） / 点击按钮节流（3秒内） </div>
    <el-form :inline="true" size="small" :model="queryParams2" class="spp-form-search spp-theme-top">
      <el-form-item>
        <span class="spp-form-label" style="width:80px">
          <i class="icon" /><i class="label">名称:</i>
        </span>
        <el-input v-model="queryParams3.name" maxlength="20" placeholder="请输入" clearable @input="onChange3" @keyup.enter.native="onSearch3" />
      </el-form-item>
      <el-form-item>
        <el-button class="spp-form-btn" size="small" type="primary" @click="onSearch3()">查询</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
import lodash from 'lodash'
import {
    
     debounce2, throttle } from '@/utils/index'

export default {
    
    
  components: {
    
    },
  data() {
    
    
    return {
    
    
      tableHeight: 170,
      tableLoading: false,
      tableData: [],
      queryParams: {
    
    
        name: '',
        page: 1,
        limit: this.pageGroup.size
      },
      queryParams2: {
    
    
        name: '',
        page: 1,
        limit: this.pageGroup.size
      },
      queryParams3: {
    
    
        name: '',
        page: 1,
        limit: this.pageGroup.size
      }
    }
  },
  created() {
    
    
    // 按钮节流 - lodash实现 - 方式2
    this.onSearch22 = lodash.throttle(this.onSearch22, 3000)
  },
  mounted() {
    
    },
  methods: {
    
    
    onChange(val) {
    
    
      console.log(val)
    },
    onSearch() {
    
    
      console.log('点击搜索按钮 请求...')
      console.log(JSON.stringify(this.queryParams))
    },
    // lodash文档： https://www.lodashjs.com/
    //
    // 搜索框防抖 - lodash实现
    // 不要在debounce里写箭头函数，否则this的指向就是undefined，而不是Vue实例对象。
    // 注意这里若是使用箭头函数的话， this为 undefined https://github.com/vue-styleguidist/vue-docgen-api/issues/23
    onChange2: lodash.debounce(function() {
    
    
      // Do some things
      this.getListByKeyword()
    }, 500),
    getListByKeyword() {
    
    
      // 请求...
      console.log('根据关键字 请求...')
      console.log(this.queryParams2.name)
      console.log(JSON.stringify(this.queryParams2))
    },
    // 按钮节流 - lodash实现 - 方式1
    onSearch2: lodash.throttle(function() {
    
    
      // Do some things
      this.requestList()
    }, 3000),
    requestList() {
    
    
      // 请求...
      console.log('点击搜索按钮 请求...')
      console.log(JSON.stringify(this.queryParams2))
    },
    // 按钮节流 - lodash实现 - 方式2
    onSearch22() {
    
    
      // Do some things
      this.requestList3()
    },
    // 防抖
    // 项目工具类
    // 如果需要加参数，则在function空的形参列表里加入
    onChange3: debounce2(function(val) {
    
    
      console.log('录入的文字', val)
      // Do some things
      this.getListByKeyword3()
    }, 500),
    getListByKeyword3() {
    
    
      // 请求...
      console.log('根据关键字 请求...')
      console.log(this.queryParams3.name)
      console.log(JSON.stringify(this.queryParams3))
    },
    onSearch3: throttle(function() {
    
    
      // Do some things
      this.requestList3()
    }, 3000),
    requestList3() {
    
    
      // 请求...
      console.log('点击搜索按钮 请求...')
      console.log(JSON.stringify(this.queryParams3))
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__icon:after {
    
    
  height: auto;
}
</style>