最近项目中有一个购物车中修改商品数量的功能,
因为用户可能点击 加减号的速度很快,为了避免用户每次点击都要调接口,影响性能,所以自己弄了一个防抖节流
初始化lock:true
data() {
return {
lock: true
}
}
在用户增/减数量的回调里
numChange(){
var that = this
if (that.lock) {
that.lock = false
setTimeout(function() {
that.lock = true
// 调用购物车数量修改接口
}, 1000)
}
}
思路是 每次点击,在1秒之内,如果没有再次点击,则调用接口, 一秒之内如再次点击,秒数则重新计算
这只是自己干想出来的一个笨方法,如果各位有什么好的方法,欢迎下面留言,让我学习学习
后来在网上搜了一下,发现有好多不一样的方法, 还有一种是引用Lodash库
第一步:安装
npm install lodash --save
第二步:组件中引入
import _ from "lodash"
第三步:使用
const btnClick = _.throttle(function(){
console.log('节流');
}, 1000)
另外配上lodash官方文档地址https://www.lodashjs.com/
网友评论