如何使用防抖与节流

防抖(_debounce)

停止滚动后,经过1s延迟后才执行,在此过程中如果不停的滚动,都会被清除,计时重新开始,直到停止滚动为止,会留下最后一个定时器

 function debounce(fn, delay) {
       let timer = null 
       return function () {
            if (timer) {
                clearTimeout(timer)     
           }                                                                                                         
            timer = setTimeout(fn, delay) 
       }
 }
 function showTop() {
       var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
       console.log('滚动条位置：' + scrollTop);
 }
 window.onscroll = debounce(showTop, 1000) 

节流(_throttle)

相当于设置了一个开关,在滚动过程中,无论你是否不停滚动,每隔1s执行一次

 function throttle(fn, delay) {
      let flag = true //借助闭包,先进入后把此变量封存起来
      return function () {
            if (!flag) {
                //休息时间 暂不接客,只要一滚动就连续触发
                return false 
            }
            // 工作时间，执行函数并且在间隔期内把状态设为无效
            flag = false
            setTimeout(() => {
                 fn()
                 flag = true;
            }, delay)
       }
  }
      
 function showTop() {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
 }
 window.onscroll = throttle(showTop, 1000)