vue使用lodash防抖和节流

节流和防抖 都是为了解决短时间触发事件造成的性能问题

防抖:debounce:假设设置防抖两秒,你点击一次,在两秒内再点击第二次,就会重新计这两秒,(就像王者里面的回城)


节流:debounce:假设设置防抖两秒,你点击一次,在两秒内再点击第二次,就会重新计这两秒,(就像王者里面的回城)

1最简单方法  

1.1下载

 npm i lodash -S

1.2.单组件使用  

import _ from 'lodash'

1.3.点击事件调用(防抖)

        
  • {{ item }}
不传值        
        click2: _.debounce(function () {
            console.log(this.price)
        }, 5000)

传值
        click2: _.debounce(function (index) {
            console.log(index)
        }, 2000)

1.4节流

        click2: _.throttle(function (index) {
            console.log(index)
        }, 2000)

如果只像上面那么写的话,两秒内你点击多次,会触发两次
改成这样就可以

        click3: _.throttle(function (index) {
            console.log(index)
        }, 2000, { trailing: false })

你可能感兴趣的:(vue.js,前端,javascript)