util.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. let timeout = null;
  2. /**
  3. * 最好用lodash的debounce!!!
  4. * 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数
  5. * @param {Function} func 要执行的回调函数
  6. * @param {Number} wait 延时的时间
  7. * @param {Boolean} immediate 是否立即执行
  8. * @return null
  9. */
  10. function debounce(func, wait = 500, immediate = false) {
  11. // 清除定时器
  12. if (timeout !== null) clearTimeout(timeout);
  13. // 立即执行,此类情况一般用不到
  14. if (immediate) {
  15. var callNow = !timeout;
  16. timeout = setTimeout(function () {
  17. timeout = null;
  18. }, wait);
  19. if (callNow) typeof func === 'function' && func();
  20. } else {
  21. // 设置定时器,当最后一次操作后,timeout不会再被清除,所以在延时wait毫秒后执行func回调方法
  22. timeout = setTimeout(function () {
  23. typeof func === 'function' && func();
  24. }, wait);
  25. }
  26. }
  27. let timer, flag;
  28. /**
  29. * 最好用lodash的throttle!!!
  30. * 节流原理:在一定时间内,只能触发一次
  31. * @param {Function} func 要执行的回调函数
  32. * @param {Number} wait 延时的时间
  33. * @param {Boolean} immediate 是否立即执行
  34. * @return null
  35. */
  36. function throttle(func, wait = 500, immediate = true) {
  37. if (immediate) {
  38. if (!flag) {
  39. flag = true;
  40. // 如果是立即执行,则在wait毫秒内开始时执行
  41. typeof func === 'function' && func();
  42. timer = setTimeout(() => {
  43. flag = false;
  44. }, wait);
  45. }
  46. } else {
  47. if (!flag) {
  48. flag = true
  49. // 如果是非立即执行,则在wait毫秒内的结束处执行
  50. timer = setTimeout(() => {
  51. flag = false
  52. typeof func === 'function' && func();
  53. }, wait);
  54. }
  55. }
  56. }
  57. export {
  58. throttle,
  59. debounce
  60. }