聊聊防抖和节流

聊聊防抖和节流

说白了，防抖节流就是使用定时器来实现我们的目的。

防抖(debounce)：

	在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
	典型的案例就是输入框搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，则重新计时。

节流(throttle)：

	规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。
	典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只生效一次。

为什么要掌握防抖和节流

	函数节流（throttle）与函数防抖（debounce）都是可以限制函数的执行频次，根据不同的场景来对执行频率
进行限制，避免了函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

防抖

	function debounce(fn, delay) {
	  let timer = null;
	  return function () {
	    if (timer) clearTimeout(timer);
	    timer = setTimeout(() => {
	      fn.apply(this, arguments);
	    }, delay);
	  }
	}

节流

	function throttle(fn, cycle) {
	  let start = Date.now();
	  let now;
	  let timer;
	  return function () {
	    now = Date.now();
	    clearTimeout(timer);
	    if (now - start >= cycle) {
	      fn.apply(this, arguments);
	      start = now;
	    } else {
	      timer = setTimeout(() => {
	        fn.apply(this, arguments);
	      }, cycle);
	    }
	  }
	}