- 安裝
yarn add lodash
- React使用
import * as _ from "lodash";
// 節(jié)流 指定一個時間掠手，在這個時間內(nèi)只執(zhí)行一次憾朴，超過指定時間可再次執(zhí)行，一般用于發(fā)生請求
// 參數(shù)依次是函數(shù)惨撇，延遲毫秒數(shù)伊脓， trailing：false 調(diào)用在節(jié)流前 true節(jié)流后
const handleSubmit = _.throttle(submit, 5000, { 'trailing': false });
const submit = () => {}
<div onClick={handleSubmit}>發(fā)送</div>
// 防抖 事件執(zhí)行時間隔N秒執(zhí)行，重復(fù)執(zhí)行，清除定時器报腔，直到停止事件執(zhí)行株搔，N后返回結(jié)果，關(guān)注最后一次結(jié)果 一般用于輸入框搜索等
const handleSearch= _.debounce(onSearch, 5000);
const onSearch = (e) => { console.log(e) } // 接受參數(shù)
<div onClick={()=>{onSearch (e)}}>發(fā)送</div>
3.Vue使用
<template>
<div @click="throttledMethod()">發(fā)送</div >
<div @click="debounceMethod()">發(fā)送</div >
</template>
<script>
import _ from 'lodash'
export default {
methods: {
throttledMethod: _.throttle(function() {console.log('!') }, 2000); // 節(jié)流
debounceMethod: _.debounce(function() { console.log('!')}, 2000) // 防抖
}
}
</script>
