防抖和节流

1.防抖

防抖，即短时间内大量触发同一事件，只会执行一次函数，实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作，防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。

function debounce(func, wait) {
    let timeout = null                   //声明一个空计时器
    return function() {
        let context = this				//得到调用者的上下文
        let args = arguments			//参数数组
        if (timeout) clearTimeout(timeout)	//判断是否已有计时器
        timeout = setTimeout(() => {		
            func.apply(context, args)		//等待wait时间，再执行这个方法
        }, wait)							
    }
}

2.节流

防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次，实现原理为设置一个定时器，约定xx毫秒后执行事件，如果时间到了，那么执行函数并重置定时器，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器

function throttle(func, wait) {
    let timeout = null
    return function() {
        let context = this
        let args = arguments
        if (!timeout) {						//没有定时器，则创造一个定时器
            timeout = setTimeout(() => {
                timeout = null				//等待wait时间到后，清空定时器
                func.apply(context, args)	//再执行方法
            }, wait)
        }

    }
}

实现方式2：使用两个时间戳prev旧时间戳和now新时间戳，每次触发事件都判断二者的时间差，如果到达规定时间，执行函数并重置旧时间戳

function throttle(func, wait) {
    var prev = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - prev > wait) {
            func.apply(context, args);
            prev = now;
        }
    }
}