js的节流和防抖

在项目开发过程中，我们通常会遇到这种需求，需要对某一行为进行js方法监听并且做出相应的业务处理，但是该行为变化的频率有可能是非常的频繁的，比如滚动条滚动、input框数值变化等。

我们都知道一个web项目性能很重要，性能好的项目能给用户留下好的印象，否则用户就会很自然的放弃这个应用，到那时我们的开发出来的东西，已经没有什么很大的价值了，因为不被认可。

好了bb完一堆废话，我们进入正题。今天要说的就是通过js的节流和防抖，来进行我们项目的一个性能优化。下面我们用input的输入作为一个栗子：
需求：有一个input搜索，此时展示数据必须根据用户输入的值，而动态展示。
做法：监听input的输入事件，然后实时进行后台接口请求，然后把数据更新。
分析：这样做可以实现需求，但是这样的开销是很大的，我们看下下面的效果图你就会明白，
通过上图，我们可以清楚的发现问题，每当我们输入一个字，就会进行业务处理，产生没必要的开销，所以我们有请主角登场。

主角一：防抖，作用就是让在事件触发的过程中，不去业务处理，而是等该事件结束时，则马上进行业务处理，这里事件结束后的多长时间去执行业务代码，是由我们自己设定的，也就是以下的参数wait，单位毫秒。功能代码如下：

let timer = null;
const debounce = (fn,wait)=> {    //fn表示业务处理方法，wait表示事件结束后多长时间执行fn
	timer = setTimeout(() => {
		fn();
    },wait)
}

例子完整代码：

	const inp = document.querySelector('input');
    inp.oninput = function() {
        debounce (getData,1000);  
    }

    const getData = () => {
        console.log('接口调用'+inp.value);
    }

    //防抖
    let timer = null;
    const debounce = (fn,wait)=> {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn();
        },wait)
    }

效果图：

主角二：节流，节流和防抖不同，防抖是事件结束后一定的时间后才会执行业务代码。节流则是事件进行的过程中按一定的频率执行业务代码，这里说的频率也是我们自己设定，以下参数wait。功能代码：

    let timer = null;
    const throttle = (fn,wait) => {     //fn业务代码函数，wait为频率
        if(!timer) {
            timer = setTimeout(() => {
                fn();
                timer = null;
            },wait)
        }
    }

例子完整代码：

	const inp = document.querySelector('input');
    inp.oninput = function() {
        throttle(getData,1000)
    }

    const getData = () => {
        console.log('接口调用'+inp.value);
    }
    //节流
    let timer = null;
    const throttle = (fn,wait) => {
        if(!timer) {
            timer = setTimeout(() => {
                fn();
                timer = null;
            },wait)
        }
    }

效果图：