轮播图中使用防抖和节流

一、什么是防抖和节流

防抖:把多个顺序地调用合并成一次,也就是在一定时间内,规定事件被触发的次数。

存在问题:希望在下滑过程中图片不断被加载出来,而不是只有当停止下滑的时候,图片才加载出来,又或者下滑的时候的数据ajax请求加载也是同理

节流:只允许一个函数在一定时间内执行一次。

与防抖相比,节流函数最主要的不同在于它保证在X毫秒内至少执行一次我们希望触发的事件 handler。


二、为什么使用防抖和节流

防止用户点击过快,严格控制触发事件的时间, 用户即使频繁点击,也能在规定的时间内减少触发次数,保证程序正常运行。


三、怎么做

定义一个变量canClick : true,在每次单击时, 先判断, 是否能单击,如果能单击, 图片翻页(i+1/i-1), 然后立即禁止单击, 将canClick改为false, 通过一次性定时器setTimeout设置时间,等动画播放后,再允许单击。


推荐阅读更多精彩内容

  • vue中axios的封装 第一步:下载axios 第二步:建立一个htttp.js 第三步:在main.js中引入...
    小李不小阅读 30评论 0 0
  • js变量复制,复杂类型存的是地址值,浅拷贝只是把地址值复制了一份,拷贝对象和原对象指向同一个地址, 一个改变也会影...
    A_dfa4阅读 903评论 6 9
  • css 高频面试题:如何实现0.5px 的边框其实设置border为0.5px 是不可以的,有些浏览器会把他渲染...
    宏_4491阅读 192评论 0 0
  • 常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit)...
    抽疯的稻草绳阅读 210评论 0 0
  • 1.引入弹幕插件: 2.vue中引入: 3.组件中使用: 示例代码: 4.效果截图: 5.说明: github文档...
    JuMinggniMuJ阅读 425评论 1 1