美文网首页
Vue中用Lodash的throttle和debounce

Vue中用Lodash的throttle和debounce

作者: 蓝醇 | 来源:发表于2019-05-21 23:07 被阅读0次

.throttle是lodash中的节流函数,.debounce是lodash中的防抖函数。
具体作用可以直接看官方文档。

在vue中具体怎么用

import _ from 'lodash'
export default{
 methods:{
    click:_.throttle(function(){
            console.log('test')
            console.log(this)
    },1000)
 }
}
import _ from 'lodash'
export default{
 methods:{
 onUpdateNote: _.debounce(function() {
      this.updateNote({ noteId: this.curNote.id, title: this.curNote.title, content: this.curNote.content })
        .then(data => {
          this.statusText = '已保存'
        }).catch(data => {
          this.statusText = '保存出错'
        })
    }, 300)
}

在lodash的throttle,debounce方法中,可以直接使用function,而且无需重新指向this,在函数内部中已经做了apply,所以这里的this指向的就是vue实例,对已有函数的外面包一层.throttle/.debounce就可以了。

相关文章

网友评论

      本文标题:Vue中用Lodash的throttle和debounce

      本文链接:https://www.haomeiwen.com/subject/hwfezqtx.html