最近遇到一個需求,vue2.x里的debounce的延遲時間(暫記為wait)需要通過this.wait拿到
很快啊,一頓操作,有了如下代碼
<template>
<div @mouseenter="onMouseEnter">123</div>
</template>
<script>
import {debounce} from 'lodash'
export default {
props:{
wait:{
type:Number,
default:0
}
},
method:{
onMouseEnter:debounce(function($event){
console.log('執(zhí)行邏輯部分')
},this.wait)
}
}
</script>
結(jié)果,報錯拿不到this,因為此時的this是window,window沒有wait變量,應(yīng)該怎么處理呢?
其實可以在執(zhí)行mouseenter之前寫個中間函數(shù)onMouseEnterProxy,再寫個debounce函數(shù)使得它等于this.onMouseEnter,請看下面代碼
<template>
<div @mouseenter="onMouseEnterProxy">123</div>
</template>
<script>
import {debounce} from 'lodash'
export default {
props:{
wait:{
type:Number,
default:0
}
},
method:{
onMouseEnterProxy($event){
//這里可以先寫一些邏輯,比如debounce觸發(fā)前要設(shè)置flag
const self = this
if(!this.onMouseEnter){
this.onMouseEnter=debounce(function($event){
console.log('執(zhí)行邏輯部分')
},this.wait)
}
this.onMouseEnter($event, self)
},
}
}
</script>
