防抖和节流的实现 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="save-button">保存</button>
  <script>
    // 防抖：舍弃在规定时间外做的高频操作
    // 闭包，使得timer为局部变量，不污染全局
    function debounce(time) {
      let timer = null;
      return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log('300ms after');
        }, time);
      }
    }

    // 小于300ms时间内的高频操作被舍弃
    window.addEventListener('resize', debounce(300));

    // 节流：在规定的时间内完成之后才能进行下一次操作
    function throttle(fn, time) {
      let active = true;
      // 未保存前，允许点击保存操作
      return function() {
        if (active) {
          // 保存之后，未完成相关操作之前不允许重新保存操作
          active = false;
          setTimeout(() => {
            fn();
            // 保存操作完成之后，允许后续点击操作
            active = true;
          }, time);
        }
      }
    }
  
    const saveButton$ = document.getElementById('save-button');
  
    saveButton$.addEventListener('click', throttle(function() {
      console.log('保存点击！');
    }, 500))

  </script>

</body>
</html>

　　

posted @ 2020-04-11 21:21  chenfengami  阅读(283)  评论(0)    收藏  举报