JavaScript 防抖与节流

防抖：规定时间内没触发交互事件，才执行函数

	<el-input @input="debounce(fn, 1000)" />

	
	/**	防抖函数	
	 *	fn		执行方法
	 *	time	等待事件
	 */
	function debounce(fn, time) {
      let timer = null;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
           fn();
        }, time);
      };
    }
    
    document.getElementById("box").addEventListener(
      "mousewheel",
      debounce(function () {
        console.log("执行");
      }, 1000)
    );

节流：规定时间内，交互多少次都只执行一次函数

	
	/**	节流函数	
	 *	fn		执行方法
	 *	time	冷却事件
	 */
	function throttle(fn, time) {
      let run = true;
      return function () {
        if (!run) return;
        run = false;
        setTimeout(() => {
          fn();
          run = true;
        }, time);
      };
    }