43.Vue中使用Lodash 节流(throttle)和防抖(
2019-05-27 本文已影响2人
圆梦人生
1、节流(throttle): 创建一个节流函数,在等待时间内最多执行 一次的函数
2、防抖(debounce):创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟多少时间后调用方法,如果不停执行函数,执行时间被覆盖
案例
<template>
<div>
<button @click="throttleFun">点击按钮(节流)</button> <br/><br/>
<input type="text" @keyup="debounceFun" /> <br/><br/>
</div>
</template>
<script>
// 导入lodash 函数function段
import funHelper from 'lodash/function'
export default {
methods: {
// 防抖(延迟多少时间调用,如果一直keyup则会覆盖之前的时间重新计算)
debounceFun: funHelper.debounce((e)=>{
console.log(e.target.value);
}, 2000),
// 2秒内调用一次
throttleFun: funHelper.throttle(()=>{
console.log('2秒内只能调用一次!');
}, 2000),
//
throttleFun2(){
console.log('3秒内调用一次');
},
initFun(){
// 定义节流函数
let throttleF = funHelper.throttle(this.throttleFun2, 3000)
// 循环调用
for(let i=0;i<10;i++){
throttleF();
}
}
},
created(){
this.initFun();
}
}
</script>