【JS】react、vue节流防抖

使用闭包函数特性，实现防抖节流。

debounce 防抖

const debounce = (fn, delay = 500) => {
  let t = false
  return (...args) => {
    t && clearTimeout(t)
    t = setTimeout(()=>fn.apply(this,args), delay)
  }
}

throttle 节流

const throttle = (fn, delay = 500) => {
  let t = true
  return (...args) => {
    if (!t) return
    fn.apply(this,args)
    t = false
    setTimeout(() => (t = true), delay)
  }
}

在 react 、 vue 中使用

vue

Tip:在vue中使用需注意this指向相关问题

<template>
  <input type="text" @change="debounceSearch" />
</template>
<script>
const debounce = (fn, delay = 500) => {
  let t = false
  return () => {
    t && clearTimeout(t)
    t = setTimeout(fn, delay)
  }
}
export default {
  methods: {
    debounceSearch:debounce(function(){
      console.log('do someting...')
    }),
  },
}
</script>

react

const App = () => {
  const debounce = (fn, delay = 500) => {
    let t = false
    return () => {
      t && clearTimeout(t)
      t = setTimeout(fn, delay)
    }
  }
  const search = () => {
    console.log('do someting...')
  }

  return <input type='text' onChange={debounce(search)} />
}

传递参数

method: {
    onInput: debounce(v => console.log('value:', v))
}