vue에서 떨림 방지 함수 구성 요소 작업 사용하기

초급
1. 먼저 떨림 방지 함수를 쓴다

/**
 * @desc  
 * @param { } func
 * @param { } wait
 * @param { } immediate
 */
export function debounce(func, wait, immediate) {
 let timeout
 
 return function(...args) {
 let context = this
 if (timeout) clearTimeout(timeout)

 if (immediate) {
 let callNow = !timeout
 timeout = setTimeout(function() {
 timeout = null
 }, wait)
 if (callNow) func.apply(context, args)
 } else {
 timeout = setTimeout(function() {
 func.apply(context, args)
 }, wait)
 }
 }
}

2. 그리고 사용할 구성 요소에 import 들어오기

import { debounce } from 'xxx'

export default {
 data: {
 return {
 vm: this
 }
 },
 methods: {
 toDoSth: debounce((vm) => {
 //  
 //  、 
 //  ， ， 。
 }, 
 500, 
 true
 )
 }
}

3. 구성 요소 방법에서 사용
template:

고급
위의 작법은 이미 문제를 해결할 수 있지만, 아무래도 미관이 부족하다고 느낀다.
인터넷에서 한 번 검색해 보니 어떤 형들이 떨림 방지 봉투를 하나의 구성 요소로 포장하는 것을 보았는데, 과연 내가 생각한 것과 같다.그러나 이 형들은 상하문을 매개 변수로 직접 전송했다. 내가 전체 실례를 전송한 것보다 뛰어나다. 나는 이를 바탕으로immediate의 기능을 추가했고 기본적으로 이벤트 매개 변수를 전송하지 않는 상황 처리를 추가했다.
debounce.js 파일:

import Vue from 'vue'

const debounce = (func, time, ctx, immediate) => {
 let timer
 const rtn = (...params) => {
 clearTimeout(timer)

 if (immediate) {
 let callNow = !timer
 timer = setTimeout(() => {
 timer = null
 }, time)
 if (callNow) func.apply(ctx, params)
 } else {
 timer = setTimeout(() => {
 func.apply(ctx, params)
 }, time)
 }
 }
 return rtn
}

Vue.component('Debounce', {
 abstract: true,
 props: ['time', 'events', 'immediate'],
 created() {
 this.eventKeys = this.events && this.events.split(',')
 },
 render() {
 const vnode = this.$slots.default[0]
 
 //   events， 
 if (!this.eventKeys) {
 this.eventKeys = Object.keys(vnode.data.on)
 }
 
 this.eventKeys.forEach(key => {
 vnode.data.on[key] = debounce(
 vnode.data.on[key],
 this.time,
 vnode,
 this.immediate
 )
 })

 return vnode
 }
})

사용 방법:
1. debounce 도입.js 파일

import 'xxx/debounce.js'

export default {
 methods: {
 toDoSth(e) {
 //  
 }
 }
}

2. 모형에서 사용한다.
여기서 time은 필수 매개 변수입니다.이벤트와immediate 매개 변수는 모두 선택할 수 있는 매개 변수입니다.
구성 요소 아래에 여러 개의 이벤트가 연결되어 있다면, 이벤트는 떨림 방지 처리가 필요한 이벤트를 사용자 정의할 수 있습니다.
즉시 실행이 필요하다면immediate 매개 변수를true로 설정할 수 있습니다.

<Debounce :time="500" event="click" :immediate="true">
 <button @click="toDoSth($event, 1)">click me</button>
</Debounce>

이렇게 하면 Debounce 구성 요소의 패키지가 한 번 완성됩니다.
보충 지식: vue 떨림 방지 함수, 폭력 클릭 피하기
1.vue 프로젝트/src/components/directive/clickAgain.js

import Vue from 'vue'

const clickAgain = Vue.directive('clickAgain',{
 //  
 bind(el, binding, vnode, oldVnode) {
  //  this
  let self = vnode.context;
  el.onclick = function (e) {
   if (self._is_click) {
    return false;
   }
   /* */
   self[binding.expression]()
   self._is_click=true;
   setTimeout(()=>{
    self._is_click=false;
   },2000)

  };
 }
});
export default clickAgain

2. 메인에서js 도입
import clickAgain from './components/directive/clickAgain.js'
/* 폭력적인 더블 클릭을 피하기 위해 도입 */
Vue.use(clickAgain);
3. 사용

<a-button key="submit" type="primary" :loading="false" v-clickAgain="handleOk">
  
</a-button>

상기 vue에서 떨림 방지 함수 구성 요소를 사용한 조작은 여러분께 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.