面试小攻略之——节流防抖

函数节流

当持续触发事件时，保证一定时间段内只调用一次事件处理函数，通俗的理解就是，公交每20分钟发一趟，不管在这20分钟内公交站内有多少人等待上车
所以所谓节流就是指持续触发事件但是在n秒内只执行一次函数，节流会稀释函数的执行频率

代码实现
ps：对于节流，一般有两种方式可以实现，分别是时间戳和定时器版

时间戳版

function trottle(doSomeThing,wait) {
    
    
    var _this,
        _arguments,
        initTime = 0;
    return function(){
    
    
        var now = +new Date();
            _this = this;
            _arguments = arguments;
            // 当间隔时间大于一定的时间后才触发对应的函数
        if(now - initTime>wait){
    
    
            doSomeThing.apply(_this,_arguments);
            initTime = now;
        }
    }
}

定时器版

function throttle(doSomething,wait){
    
    
    var timeout;  
    return function(){
    
    
        var _this = this;
            _arguments = arguments;
            //初始timeout是undefined
        if(!timeout){
    
    
            timeout = setTimeout(function(){
    
    
                // 主要是让每次move的时候，使!timeout为true,直到一段时间后timeout=null
                timeout = null;
                doSomething.apply(_this,_arguments);
            },wait);
        };
    }
}

函数防抖

在任务频繁触发的情况下,一个事件在被触发的一段时间后再执行回调,假如在这段时间内又被触发了,则重新开始计时，通俗讲就是类似上电梯，电梯门只要在关的过程中有人上电梯，电梯门就重新打开，后面如果没有人上才开始运行

代码实现

function debounce(fn, wait){
    
    
  let timer = null
  return function(){
    
    
    let args = arguments
    clearTimeout(timer)
    timer = setTimeout(() => {
    
    
      fn.apply(this, args)
    }, wait)
  }
}

常用应用场景

函数防抖应用场景：

连续的事件，只需触发一次回调的场景：

1. 搜索框搜索输入，只需要用胡最后一次输入完，再发送请求
2. 手机号。邮箱验证输入检测
3. 窗口大小resize,只需窗口调整完成后，计算窗口大小，防止重复渲染

函数节流的应用场景：
间隔一段事件执行一次回调的场景有：

1. 滚动加载长列表，监听滚动到页面底部
2. 谷歌搜索框，搜索联想共呢个
3. 高频点击提交，表单的重复提交
4. 一些接口的重复请求