前言

和以往不同,没什么原创内容,就是一篇纯笔记,防止自己以后忘
全部来源于学习b站up主
前端小夏老师
的这个视频
函数的防抖和节流 – JS 原生面试题

简单解释下防抖节流
都是在单位时间内,限制 function 被执行的次数

  • 节流好理解,就是点完一次,停止接待1秒,然后在继续接待,停止过程中你随便点,有反应算我输。
  • 防抖也不复杂,和上面类似,区别是,必须停够1秒才能再点。如果遇到一直不停的点,那就一直不重置,必须老实停1秒不点,才恢复,和我起床一样,越催越起不来。


应用范围很广
包括不限于
用户夏姬八乱点按钮(主要是这个)
监听鼠标滚轮(忘了方法名叫啥了)
windows.onresize
反复提交订单
反复发验证码之类的
等等



代码

防抖

  1. /**
  2. * 防抖核心代码
  3. * 逻辑是
  4. * 第一次点完以后开始计时
  5. * 如果单位时间内点了的话
  6. * 不但无效,而且时间从头计算
  7. *
  8. * 例如
  9. * 设置3000毫秒
  10. * 第一次点完如果3秒内再次点击
  11. * 不但不触发任何效果,而且3秒从头开始算
  12. * 如果一直点一直点,就永远无效
  13. */
  14. function debounce(fn, timer) {
  15. let timeout = null;
  16. return function () {
  17. if (timeout) {
  18. clearTimeout(timeout);
  19. } else {
  20. fn.apply(this, arguments);
  21. }
  22. timeout = setTimeout(() => {
  23. timeout = null;
  24. }, timer);
  25. }
  26. }

节流

  1. /**
  2. * 节流核心代码
  3. * 逻辑是
  4. * 第一次点完以后开始计时
  5. * 如果下次点击时间没达到设定时间
  6. * 则无效,否则有效
  7. *
  8. * 例如
  9. * 设置3000毫秒
  10. * 第一次点击完过了1秒点击 判定为无效 立刻记录当前时间
  11. * 过了2秒点击 与上一次时间对比 不足3秒 判定无效
  12. * 过了3秒以上点击 与上次时间对比 足够3秒 判定有效 并立刻记录当前时间
  13. *
  14. */
  15. function throttle(fn, delay) {
  16. let begin = 0;
  17. return function () {
  18. const current = new Date().getTime();
  19. if (current - begin > delay) {
  20. fn.apply(this, arguments);
  21. begin = current;
  22. }
  23. }
  24. }



END

在线测试效果地址
https://tczmh.gitee.io/debounce-and-throttle/