vue防抖和节流

vue防抖和节流

什么是防抖？

短时间内大量触发同一事件，只会执行最后一次函数，防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。

2.什么是节流

短时间内多次触发同一方法，只会执行第一次函数，节流常用于加入购物车/秒杀活动等，如果不做处理，后端还未执行完毕，前端再次请求接口，造成重复数据.

// anti-shake-throttle.js
/**
* @desc 函数防抖
* @param func 目标函数
* @param wait 延迟执行毫秒数
*/
export function debounce (func, wait) {
  let timeout = null
  return function () {
    let context = this
    let args = arguments
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(context, args)
    }, wait)
  }
}

/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
*/
export function throttle (func, wait) {
  let timeout = null
  return function () {
    let context = this
    let args = arguments
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null
        func.apply(context, args)
      }, wait)
    }
  }
}

// 使用
<script>
import {debounce, throttle} from '../utils/anti-shake-throttle.js'
export default {
  name: 'index',
  data () {
    return {}
  },
  methods: {
    inputHandle: debounce(function () {
      console.log('防抖触发')
    }, 1000),
    clickHandle: throttle(function () {
      console.log('节流触发')
    }, 1000)
  }
}
</script>

————————————————
原文链接