函数截流、防抖方法封装

        函数截流是前端开发中常用的优化手段，用于限制某个函数即使多次被调用但在指定的时间内只能执行一次。可用于表单输入等高频触发的事件

        函数截流的代码封装

                函数接收两个参数：

                        callback：需要使用截流方法的事件

                        wait：截流的时间间隔

          其工作原理是：当需要截流的函数第一次执行的时候会触发当前的截流函数，同时函数会启动一个定时器，时长是wait指定的时间，在等待时间内，无论函数触发多少次都不会再次被执行，直到时间结束，定时器会被重置，函数可以再次被执行

export const throttle = (callback:any, wait:any) => {
	  let timer: NodeJS.Timeout | null;
	  return function(...args:any) {
	    if (!timer) {
	      callback(...args); //立即执行函数
	      timer = setTimeout(() => {
	        timer = null; //到一定时间后释放函数
	      }, wait);
	    }
	  };
	};

         防抖可用于在高频事件触发延迟函数的执行，直到事件触发停止一定时间后再执行。如果在此期间事件再次触发，则重新开始计时，可以避免因高频事件触发导致的多次执行，适用于监听滚动事件以实现无限加载

         函数防抖的代码封装

                函数接收两个参数：

                        callback：需要使用防抖方法的事件

                        delay：防抖延迟的时间

          其工作原理是：

                每次触发事件的时候，如果定时器timer存在就清除timer，在启动一个新的定时器，延迟delay之后再执行callback函数，如果在这段时间内再次触发事件，定时器会被清除并重新启动，只有在不触发事件后，定时器才会到达结束点并开始执行callback函数

        举例分析：

                假设delay为500ms，而用户在200ms内连续输入了三个字符：

                        在第一次输入时，启动了一个500ms的定时器，在200ms后用户第二次输入，此时定时器还未到期，但是会立即清除掉之前的定时器请重新启动一个500ms的定时器...，如果用户停止输入，最后一个定时器将在500ms后触发回调函数，进行实际的事件处理

export const debounce = (callback, delay) => {
  let timer;
  return function(...args) {
    if (timer) clearTimeout(timer); // 清除之前的定时器
    timer = setTimeout(() => {
      callback(...args); // 定时器结束后执行回调函数
    }, delay);
  };
};

截流和防抖的区别在于：

        截流：函数在一定的时间内最多执行一次，常用于控制连续触发事件的执行频率

        防抖：延迟函数的执行，直到触发事件停止指定的时间后才能执行