JavaScript防抖与节流

防抖

概念

触发高频事件后，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。只有在n秒内没有触发事件，n秒过后才会执行事件。

防抖示例

示例1通过onclick绑定事件

<button onclick="antiShake()">防抖</button>
<script>
     function handle() {
        console.log('只会在暂停触发时，时间到才会执行');
     }
     function debounce(fun, wait) {
      let timer;
      return function () {
               clearTimeout(timer)
               timer = setTimeout(() => {
                   fun.apply(this, arguments)
               }, wait)
           }
       }
       antiShake = debounce(handle, 500)
</script>

示例2通过原生获取Dom的id

<button id="antiShake">防抖</button>
<script>
       function handle() {
           console.log('只会在暂停触发时，时间到才会执行');
       }
     function debounce(fun, wait) {
      let timer;
      return function () {
               clearTimeout(timer)
               timer = setTimeout(() => {
                   fun.apply(this, arguments)
               }, wait)
           }
       }
        let antiShake = document.querySelector('#antiShake')
     antiShake.addEventListener('click', debounce(handle, 500))
</script>

---

节流

概念

高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

节流示例

示例1通过onclick绑定事件

 <button onclick="throttle()">节流</button>
<script>
      function throttleChange(fn, wait) {
           let canRun = true;
           return function () {
              if (!canRun) return;
               canRun = false;
               setTimeout(() => {
                   fn.apply(this, arguments)
                   canRun=true
               }, wait)
           }
      }

       function throttleHandler() {
           const date = new Date()
          console.log(`时间：${date.getHours()}时：${date.getMinutes()}分：${date.getSeconds()}秒`);
       }
     throttle = throttleChange(throttleHandler, 2000);
</script>

示例1 通过原生获取Dom的id

<button id="throttle">节流</button>
<script>
      function throttleChange(fn, wait) {
           let canRun = true;
           return function () {
              if (!canRun) return;
               canRun = false;
               setTimeout(() => {
                   fn.apply(this, arguments)
                   canRun=true
               }, wait)
           }
      }

       function throttleHandler() {
           const date = new Date()
          console.log(`时间：${date.getHours()}时：${date.getMinutes()}分：${date.getSeconds()}秒`);
       }
      let throttle = document.querySelector('#throttle')
    throttle.addEventListener('click',throttleChange(throttleHandler,2000))
</script>