vue 防抖节流演示

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

 防抖就是将一段时间内连续的多次触发转化为一次触发。

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

防抖节流函数 js文件

/**
 * 函数防抖 (只执行最后一次点击)
 * @param fn
 * @param delay
 * @returns {Function}
 * @constructor
 */
export const Debounce = (fn, t) => {
  const delay = t || 500
  let timer
  console.log(fn)
  console.log(typeof fn)
  return function() {
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      timer = null
      fn.apply(this, args)
    }, delay)
  }
}
/**
 * 函数节流
 * @param fn
 * @param interval
 * @returns {Function}
 * @constructor
 */
export const Throttle = (fn, t) => {
  let last
  let timer
  const interval = t || 500
  return function() {
    const args = arguments
    const now = +new Date()
    if (last && now - last < interval) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        last = now
        fn.apply(this, args)
      }, interval)
    } else {
      last = now
      fn.apply(this, args)
    }
  }
}

组件中使用

 

<template>
  <div id="debounce">
     <h1 @click="clickMe">防抖演示</h1>
  </div>
</template>

<script>
import {Debounce} from '../../public.js'
export default {
  name: 'debounce',
  data(){
    return {
        
    }
  },
  //防抖使用
  methods:{
    clickMe:Debounce(function(){
          console.log("hello world")
     },2000)
        
      
},
  mounted(){
    
}
}
</script>

<style>


</style>