React项目 防抖与节流

1、节流

自己规定一个时间，在这个规定时间内，某事件被触发多次，但是这个事件只执行一次

//节流
  //用定时器实现节流函数
  Throttle=(func, wait)=>{
    let timeout;
    return function() {  //形成一个闭包
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                //setTimeout()函数是延时器，用于在指定的毫秒后调用函数和计算表达式，且只用于执行一次
                //setInterval()函数是定时器，每个指定的毫秒后调用函数和计算表达式，可循环执行，可用clear来清除定时器
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
 
    }
}
//func 为需要调用的方法 1000为1秒内只执行一次
this.Throttle(this.func,1000)

2、防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

//防抖函数
    Debounce=(func, wait)=> {
        let timeout; // 创建一个标记用来存放定时器的返回值
        return function () {
            timeout && clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉
            // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 func 函数
            timeout = setTimeout(() => { 
                func.apply(this, arguments)
            }, wait)
        }
    }
//func 为需要调用的方法 1000为1秒内只执行一次 如果重新触发则重新计算时间
this.Debounce(this.func,1000))