使用lodash实现节流(手把手)

372 阅读1分钟

1.引入lodash:将lodash全部封装好的函数都引入进来了

 // 按需引用
  import throttle from 'lodash/throttle'

2.进行对函数的节流

//原函数 截屏2022-04-15 上午6.49.30.png

节流个人理解:当用户点击很多次的时候,我们使用节流就可以固定功能实现的时间,比如本次节流设置了5s,那当用户点击很多次只会在5秒后实现一次功能。

//引入节流后函数变化

 // 向服务器发送请求修改数据,再一次渲染页面
     handler:throttle( async function(type,disNum,cart){
       // input传入的是最终的数 cart是为了记录是哪个产品
       switch (type) {
          case "add":
            disNum = 1;
            break;
          case "minus":
            disNum = cart.skuNum >1 ? -1 :0;
            break;
          case "change":
            // 非法数的话
            if(isNaN(disNum)||disNum<1)
              disNum = 0;
            else
              disNum = parseInt(disNum)-cart.skuNum;
            break;
        }
        try {
         await this.$store.dispatch('AddOrUpdateShopCart',{skuId:cart.skuId,skuNum:disNum});
         this.getData();
        } catch (error) {}
     },5000),