React/Vue中基于lodash库完成防抖、节流功能

1. 安装

yarn add lodash

2. React使用

import * as _ from "lodash";
// 节流 指定一个时间，在这个时间内只执行一次，超过指定时间可再次执行，一般用于发生请求
// 参数依次是函数，延迟毫秒数， trailing：false 调用在节流前 true节流后
const handleSubmit = _.throttle(submit, 5000, { 'trailing': false });
const submit = () => {}
<div onClick={handleSubmit}>发送</div>
// 防抖 事件执行时间隔N秒执行，重复执行，清除定时器，直到停止事件执行，N后返回结果，关注最后一次结果 一般用于输入框搜索等
const handleSearch= _.debounce(onSearch, 5000);
const onSearch = (e) => { console.log(e) } // 接受参数
<div onClick={()=>{onSearch (e)}}>发送</div>

3.Vue使用

<template>
  <div @click="throttledMethod()">发送</div >
  <div @click="debounceMethod()">发送</div >
</template>
<script>
import _ from 'lodash'
export default {
  methods: {
    throttledMethod: _.throttle(function() {console.log('!') }, 2000); // 节流
    debounceMethod: _.debounce(function() { console.log('!')}, 2000)  // 防抖
  }
}
</script>