前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >debounceFnHook vue函数防抖hook

debounceFnHook vue函数防抖hook

作者头像
copy_left
发布2020-04-09 11:46:37
3320
发布2020-04-09 11:46:37
举报
文章被收录于专栏:方球
使用例子
代码语言:javascript
复制
<template>
  <div class="home">

    <div>
      <Card style='margin: 20% auto; width: 600px' title='form'>
        <h4> {{state}} </h4>
        <Input  :value='state' @input='run'  />
      </Card>
    </div>
    
  </div>
</template>

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

export default {

  setup(){
    const [ state, setState ] = setRefHook('')
    const { run, cancel } = debounceFnHook( setState, 500 )

   return {
     state,
     run,
     cancel
   }

  }

}
</script>
实现
代码语言:javascript
复制
import { ref } from '@vue/composition-api'


/**
 * 函数防抖处理
 * @param { Function } fn 被包装函数 
 * @param { Number } wait 等待时间 ms 
 * @return { { run, cancel } } run 包装后的执行函数  cancel 取消执行
 * @exports
 * 
 *  const [ state, setState ] = setRefHook('')
    const { run, cancel } = debounceFnHook( setState, 500 )
 *  
 */
export default function debounceFnHook(fn, wait){
    const timer = ref(null)
    
    const cancel = () => timer.value&&clearTimeout(timer.value)

    const run = (...args) => {
        cancel()
        timer.value = setTimeout(() => fn(...args), wait)
    }

    return {
        run,
        cancel
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用例子
  • 实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档