美文网首页
vue中使用防抖节流

vue中使用防抖节流

作者: IssunRadiance | 来源:发表于2022-04-25 15:13 被阅读0次

最近项目中有一个购物车中修改商品数量的功能,
因为用户可能点击 加减号的速度很快,为了避免用户每次点击都要调接口,影响性能,所以自己弄了一个防抖节流

初始化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/

相关文章

网友评论

      本文标题:vue中使用防抖节流

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