javascript函数节流、防抖及使用场景函数节流就是指定时间间隔内只执行一次任务，减少消耗，节省开支。比如水电站是用

什么是函数节流

函数节流就是指定时间间隔内只执行一次任务，减少消耗，节省开支。比如水电站是用大坝来控制水的流量，达到细水长流，持续发电的作用。还比如早上客流高峰，地铁站会限制人流，运完一批人再放另一批人进去。同理，这里所说的节流也是如此，为了避免某个方法过于频繁的调用，需要有一个'大坝'来控制某个方法执行的频率。

函数节流代码示例

function throttle(fn, time = 300) {
    let running = false;
    return function () {
        if (running) return;
        running = true;
        setTimeout(() => {
            fn.apply(this, arguments);
            running = true;
        }, time);
    };
}

函数节流使用场景

在监听滚动事件(scroll)、touchmove事件，mousemove事件等，用使用节流能减少方法的触发频率。例如：

window.addEventListener('scroll',throttle(
function(e){
  console.log(e);
},300))

什么是函数防抖

函数防抖简单理解就是事件触发延时一定时间（T1）才会执行具体的函数。
假如两个事件触发的时间间隔为T2。
如果T2>T1，函数触发两次。
如果T2<T1，函数只执行一次(第二次事件触发延时T1执行函数)。

函数防抖代码示例


function debounce(fn, t1 = 300) {
    let sit = null;
    return function () {
        window.clearTimeout(sit);
       sit = setTimeout(() => {
            fn.apply(this, arguments);
        }, t1);
    };
}

函数防抖使用场景

快捷搜索。当用户输入完内容时，会显示相关的下拉列表，供用户快速选择。，比如使用百度搜索，美团搜索。

doucument.querySelector('input').addEventListener('input',
    debounce(function(e){
      console.log(e)
},300))