javascript-函数防抖

2018/05/03 00:00:00

什么是函数防抖

函数防抖是频繁发生的情况下，只会执行代码一次，是优化高频率执行代码的一种手段。实际开发中可能会遇到n秒内只能触发一次事件或者是无论触发多少次都等到最后一次触发n秒后才执行。

实现n秒内只能执行一次

<body>
  <button id="container">点击</button>
  <script>
    var count = 0;
    var btn = document.querySelector('#container');
    //防抖函数
    function debounce(delay) {
        var timer = false;

        return function() {
          if (!timer) {
            
            timer = true;
            // 具体要执行的动作
            console.log('执行')

            setTimeout(function() {
              timer = false;
            }, delay)
          }else {
            alert('操作过于频繁')
          }
        }
    }

    btn.onclick = debounce(3000);
  </script>
</body>

实现无论触发多少次都等到最后一次触发n秒后才执行

<body>
  <button id="container">点击</button>
  <script>
    var btn = document.querySelector('#container');
    //防抖函数
    function debounce(delay) {
        var timer;

        return function() {
          clearTimeout(timer);
          timer = setTimeout(function(){
            console.log('以最后一次触发事件时间为准')
          }, delay)
        }
    }

    btn.onclick = debounce(3000);
  </script>
</body>

总结

函数防抖是通过定时器实现一定时间内只能触发一次，防止频繁操作。