节流和防抖 都是为了解决短时间触发事件造成的性能问题防抖:
debounce:假设设置防抖两秒,你点击一次,在两秒内再点击第二次,就会重新计这两秒,(就像王者里面的回城)
节流:
debounce:假设设置防抖两秒,你点击一次,在两秒内再点击第二次,就会重新计这两秒,(就像王者里面的回城)
1最简单方法
1.1下载
npm i lodash -S
1.2.单组件使用
import _ from 'lodash'
1.3.点击事件调用(防抖)
<ul>
<li v-for="(item, index) in 2" :key="index" @click="click2(index)">{{ item }}</li>
</ul>
不传值
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 })