函数节流与防抖

jiezi

5 年前

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Throttle</title>
  <style>
    html,
    body {
      height: 500%;
      /* 让其出现滚动条 */
    }
  </style>
</head>

<body>
  <script>
    // 函数节流：函数在执行一次后，只有在大于设定的执行周期之后才会执行第二次
    /*
    其原理是用 时间戳 来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环；用到了闭包的特性，可以使变量 lastTime 的值长期保存在内存中。*/

    function throttle(fn, delay) {
      // 记录上一次函数触发的时间
      let lastTime = 0
      return function () {
        // 记录当前函数执行时间
        let nowTime = Date.now()
        if(nowTime - lastTime > delay){
          // 修正 this 指向问题
          fn.call(this)
          // 同步时间
          lastTime = nowTime
        }
      }
    }
    function fn(){console.log('scroll 事件被触发了' + Date.now())
    }
    document.onscroll = throttle(fn, 2000)
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Debounce</title>
</head>

<body>
  <button id="btn"> 按钮 </button>

  <script>
    /*
  防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。实现原理：第一次调用函数，创建一个定时器，在指定的时间间隔之后运行
  第二次调用该函数，清除前一次的定时器，并设置另一个
    如果前一个定时器已经执行过了，这个操作就没有任何意义
    如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行
  */
    function debounce(fn, delay){
      // 记录上一次的延时器
      let timer = null
      return function(){
        // 清除上一次的定时器
        clearTimeout(timer)
        timer = setTimeout(()=>{fn()
        }, delay)
      }
    }

    function fn() {console.log('点击事件被触发' + Date.now())
    }
    document.getElementById('btn').onclick = debounce(fn, 2000)
  </script>

</body>

</html>

函数节流与防抖

函数节流（throttle）

函数防抖（debounce）