事件的防抖和节流

前端开发过程中，我们经常会遇到要绑定一些持续触发的事件，如 onresize、onscroll、onmousemove 等，但不希望在事件持续触发的过程中非常频繁地执行函数。

一般来讲，防抖和节流是比较好的解决方案。

1.防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间(初始化规定时间)，连续触发只会执行最后一次

eg:

css

  div {
        width: 150px;
        height: 150px;
        color: #fff;
        background: #000;
        display: inline-block;
        margin: 5px
      }

html

<div class="div1"></div>

js

 document.querySelector('.div1').onclick = debounce(1000);
//闭包  延时器解决
      function debounce(a) {
        let timer;
        return function() {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            console.log(6)
          }, a);
        }
      }

2.触发事件后在 n 秒内函数只能执行一次，但不会重新计算函数执行时间，即可以连续触发

eg:

html

   <div class="div2"></div>

js

document.querySelector('.div2').onclick = bbb;
//设置flag开关  1秒间隔执行一次
      var flag = true;
      function bbb() {
        if (flag) {
          flag = false;
          setTimeout(function() {
            flag = true;
          }, 1000)
          console.log(666);
        }
      }

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。