轮播图中使用防抖和节流

一、什么是防抖和节流

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

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

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

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


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

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


三、怎么做

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


你可能感兴趣的:(轮播图中使用防抖和节流)