1. // 防抖 与节流
    2. //概念 节流和防抖都是为了降低调用频率的一种方式 
    3. //相同点就是都是需要设置一个回调函数及周期时间，区别在于：
    4. //防抖是停止触发后的100ms，执行一次（在此时间内，只要不停止触发，理论上就永远不会触发回调）  节流就是 在不断的触发过程中，每个100ms就执行一次。
    6. //节流 throttle
    7. //在高频触发回调函数时，节流操作使回调函数在每隔一段时间定期执行一次。时间间隔内再触发，不会重新执行。 核心在于让一个函数不要执行的太频繁，，减少一些过快的操作 类似与技能冷却
    9. //节流
    10. function throttle(fn, wait) {
    11.     let time = 0;
    12.     return () => {
    13.         if (time) return; //在定时器时间范围内，不允许触发下面的方法，只有超过了时间范围后才能触发。一般用于scorll 、mousemove等事件
    14.         timer = window.setTimeout(function() {
    15.             fn();
    16.             time = 0;
    17.         }, wait)
    18.     }
    20. }
    21. //防抖 监听浏览器窗口resize操作（只需要计算一次）键盘文本输入的验证-防抖（连续输入文字后发送请求进行验证，验证一次就好） 提交表单-防抖（多次点击变成一次）
    22. function debounce(fnc, wait) {
    23.     let timer = 0;
    24.     return () => {
    25.         clearTimeout(timer);
    26.         timer = window.setTimeout(function() {
    27.             fnc();
    28.             time = 0; //防抖只验证一次，当我无限滚动的时候 他都会先进行清空定时器，再进到定时器进行执行函数。当我最后一次滚动的时候，它的定时器还存在。所以要time=0;
    29.         }, wait)
    30.     }
    31. }
    33. let handleScrollTop = () => {
    34.     const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    35.     console.log('滚动条的位置:' + scrollTop);
    36. }
    38. //防抖：在停止滚动100ms后，才会输出滚动条的位置  
    39. window.onscroll = debounce(handleScrollTop, 100);
    41. //节流：每100ms都会输出一次滚动条位置 
    42. window.onscroll = throttle(handleScrollTop, 100)