throttleFnHook Vue 函數節流Hook

使用例子

<template>
  <div class="home">

    <div>
      <Card style='margin: 20% auto; width: 600px' title='form'>
        <h4> {{state}} </h4>
        <Button @click="run"> add </Button>
      </Card>
    </div>
    
  </div>
</template>

<script>
// import { ref } from '@vue/composition-api'
import setRefHook from '@/hooks/setRefHook'
import throttleFnHook from '@/hooks/throttleFnHook' 

export default {

  setup(){
    const [state, setState] = setRefHook(0)
    const { run, cancel } = throttleFnHook( () => setState(state.value + 1) , 500 )

   return {
     state,
     run,
     cancel
   }

  }

}
</script>           

複制

實作

import { ref } from '@vue/composition-api'


/**
 * 
 * @param { Function } fn 被包裝函數 
 * @param { Number } wait 間隔時間 ms 
 * @return { { run, cancel } } run 執行函數  cancel 取消執行
 * @exports
 * 
 * const state = 1
 * const addOne = () => state = state + 1
 * const { run: addOne } = throttleFnHook(addOne, 500) 
 * 
 */
export default function throttleFnHook(fn, wait){

    const timer = ref(null)

    const cancel = () => timer.value&&clearTimeout(timer.value)

    const run = (...args) => {
        if(timer.value){return}
        
        timer.value = setTimeout(() => {

            fn(...args)
            timer.value = null
            
        }, wait)
    }
    
    return {
        cancel,
        run
    }
}           

複制