函数防抖和节流

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。
针对此类快速连续触发和不可控的高频触发问题，防抖和节流给出了两种解决策略；

函数防抖
是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时；简单说就是遇到延时函数的定时器，就重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。

防抖函数分为非立即执行版和立即执行版。
非立即执行版：
非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

// 函数防抖的实现
//fn是用户传入需要防抖的函数
//wait是等待的时间
function debounce(fn, wait) {
  	var timer = null;
   	return function() {
    		var context = this,
      		args = arguments;
       		// 如果此时存在定时器的话，则取消之前的定时器重新记时
    		if (timer) {
      			clearTimeout(timer);
      			timer = null;
    		}
    		// 设置定时器，使事件间隔指定事件后执行
	    	timer = setTimeout(() => {
	      		fn.apply(context, args);
	    	}, wait);
	  };
}

立即执行版：
立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

function debounce(func,wait) {
    let time;
    return function () {
        let context = this;
        let args = arguments;

        if (time) clearTimeout(time);

        let callNow = !time;
        time = setTimeout(() => {
            time= null;
        }, wait)

        if (callNow) func.apply(context, args)
    }
}

结合起来

//func函数
//wait 延迟执行毫秒数
//immediate true 表立即执行，false 表非立即执行
function debounce(func,wait,immediate) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

函数节流
是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。简单说就是有延时函数定时器，就不执行任何操作。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。

节流一般有两种方式可以实现，分别是时间戳版和定时器版。
时间戳版
在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。

// 函数节流的实现;
function throttle(fn, delay) {
  var preTime = Date.now();
   return function() {
    var context = this,
      args = arguments,
      nowTime = Date.now();
       // 如果两次时间间隔超过了指定时间，则执行函数。
    if (nowTime - preTime >= delay) {
      preTime = Date.now();
      return fn.apply(context, args);
    }
  };
}

定时器版
在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}

时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。
结合起来

//函数节流
//func 函数
//wait 延迟执行毫秒数
//type 1 表时间戳版，2 表定时器版
function throttle(func, wait ,type) {
    if(type===1){
        var previous = 0;
    }else if(type===2){
        var timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

防抖是控制次数，节流是控制频率
防抖和节流各有特点，在不同 的场景要根据需求合理的选择策略。
如果事件触发是高频但是有停顿时，可以选择防抖；
在事件连续不断高频触发时，只能选择节流，因为防抖可能会导致动作只被执行一次，界面出现跳跃。

参考：
https://www.jianshu.com/p/c8b86b09daf0