防抖和节流

在前端开发中会遇到一些频繁的事件触发，比如keyup、keydown、滚动加载请求…频繁的触发会导致卡顿。
防抖的原理：一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件

<input id="inp"/>

   function  debounce(func,time){
	  		var timeOut =null;
	  		return function(){
	  			clearTimeout(timeOut)
	  			timeOut=setTimeout(func,time)
	  		}
  	}
  	function say(){
  		console.log('抖着呢。。。')
  	}
	var obj = document.getElementById('inp')
	obj.onkeydown = debounce(say,1000)

如果不防抖，键盘一输入就会打印出 抖着呢。。，防抖后距离上一次键盘输入间隔time后才打印出来 抖着呢。。
如果需要马上执行的防抖函数，可以改装下

	function debounce (func, wait = 50, immediate = true) {
	  let timer, context, args
	  const later = () => setTimeout(() => {
	    timer = null
	    if (!immediate) {
	      func.apply(context, args)
	      context = args = null
	    }
	  }, wait)
	  return function(...params) {
	    if (!timer) {
	      timer = later()
	      if (immediate) {
	        func.apply(this, params)
	      } else {
	        context = this
	        args = params
	      }
	    } else {
	      clearTimeout(timer)
	      timer = later()
	    }
	  }
	}

节流的原理：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

function throttle(fn,time) {
      let go = true; 
      return function () {
        if (!go) return; 
        go = false;
        setTimeout(() => { 
          fn.apply(this, arguments);
          go = true;
        }, time);
      };
    }
    function sayHi() {
      console.log('hai');
    }
		var obj = document.getElementById('inp')
		obj.onkeydown = throttle(sayHi,2000)

每隔2000s执行一次sayHi方法