防抖和节流的小demo

防抖：连续触发事件，只要不是最后一次触发，就不执行异步操作

<button>点我试试</button>
<script>
	var btn = document.querySelector('button')
	var timer = null
	btn.onclick = function() {
     
     
		// 每次执行把上一次定时器清除，第一次执行也会清除timer
		clearTimeout(timer)
		// 延时 0.5s 执行
		timer = setTimeout(() => {
     
     
			console.log('发送请求了。。。')
		}, 500)
	}
</script>

节流：第一次发生请求后，只要响应没回来，就不能发送第二次（定义了一个开关控制）

<button>点我试试</button>
<script>
  var btn = document.querySelector('button')
  // 节流阀 定义了一个开关
  var flag = true
  btn.onclick = function () {
    
    
    // 如果节流阀是开启的，才会执行操作
    if (flag) {
    
    
      // 一旦执行 关闭节流阀
      flag = false
      console.log('发送请求')
      // 模拟请求
      setTimeout(() => {
    
    
        // 请求成功后，在开启节流阀
        flag = true
      }, 5000)
    }
  }
</script>