最近遇到一個(gè)需求,vue2.x里的debounce的延遲時(shí)間(暫記為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é)果,報(bào)錯(cuò)拿不到this,因?yàn)榇藭r(shí)的this是window,window沒有wait變量,應(yīng)該怎么處理呢?
其實(shí)可以在執(zhí)行mouseenter之前寫個(gè)中間函數(shù)onMouseEnterProxy,再寫個(gè)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>