1、節(jié)流(throttle): 創(chuàng)建一個節(jié)流函數(shù)突照,在等待時間內最多執(zhí)行 一次的函數(shù)
2帮非、防抖(debounce):創(chuàng)建一個 debounced(防抖動)函數(shù)氧吐,該函數(shù)會從上一次被調用后讹蘑,延遲多少時間后調用方法,如果不停執(zhí)行函數(shù)筑舅,執(zhí)行時間被覆蓋
案例
<template>
<div>
<button @click="throttleFun">點擊按鈕(節(jié)流)</button> <br/><br/>
<input type="text" @keyup="debounceFun" /> <br/><br/>
</div>
</template>
<script>
// 導入lodash 函數(shù)function段
import funHelper from 'lodash/function'
export default {
methods: {
// 防抖(延遲多少時間調用,如果一直keyup則會覆蓋之前的時間重新計算)
debounceFun: funHelper.debounce((e)=>{
console.log(e.target.value);
}, 2000),
// 2秒內調用一次
// throttleFun: funHelper.throttle(()=>{
throttleFun: funHelper.throttle(function(){
// 如果使用()=> 箭頭函數(shù) this指向根實例座慰,使用普通函數(shù)function()不改變this指向本組件
console.log(this);
console.log('2秒內只能調用一次!');
}, 2000, { 'trailing': false }),
//
throttleFun2(){
console.log('3秒內調用一次');
},
initFun(){
// 定義節(jié)流函數(shù)
let throttleF = funHelper.throttle(this.throttleFun2, 3000)
// 循環(huán)調用
for(let i=0;i<10;i++){
throttleF();
}
}
},
created(){
this.initFun();
}
}
</script>