防抖节流

1. 防抖

持续触发事件时，在一定时间内没有再触发事件，才执行该事件。假设一个按钮，点一下它就一激灵一下，为了不让它过度惊吓（防止它不断抖动），规定只能2秒内不发生点击事件，才触发该事件。
思路：设置一个定时器，规定时间内触发l了该事件就重新开始计时。
tip：不清楚怎么写时，先把它的用法写出来。

element.addEventListener('click', debounce(() => console.log('debounce~'), 2000);
function debounce(handle, time){
  let timer; // 定时器
  return function(){
    // 执行到这表示点击了，需要清除定时器并重新开始
    clearTimeout(timer);
    timer = setTimeout(() => {
	  // 执行到这里表示time时间内无事发生
	  handle();
	}, time)
  }
}

2. 节流

持续触发事件时，在一定时间内只执行一次。之所以称之为节流是因为把它比喻成了自来水龙头，我们需要的效果是一滴一滴的有规律的自来水。
思路：设置一个锁，每隔一定时间把锁打开(lock = false)，只有锁打开时，函数才能执行。

element.addEventListener('click', throttle(() => console.log('throttle~'), 2000);
function throttle(handle, time){
  let lock = false;
  return function(){
    if(lock){
      return;
	}
	handle();
	lock = true; 
	setTimeout(() => {
	  // 如果处理函数写在这里，表示每段时间的末尾执行该函数
      // handle();
      lock = false;
    }, time)
  }
}