js前端手撕代码系列（promise，防抖，节流，原生ajax，封装promise等）

防抖与节流

介绍

• 通过防抖（debounce） 和 节流（throttle） 的方式来减少调用频率，减少资源浪费
• 防抖: n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时
  （用搭电梯形容：电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖）
• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
  （用搭电梯形容：电梯第一个人进来后，15秒后准时运送一次，这是节流）

区别

• 相同点
  • 都可以通过使用 setTimeout 实现
  • 目的都是，降低回调执行频率。节省计算资源
• 不同点
  • 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
  • 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

使用场景

• 防抖在连续的事件，只需触发一次回调的场景有：
  • 搜索框搜索输入。只需用户最后一次输入完，再发送请求
  • 手机号、邮箱验证输入检测
  • 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染
• 节流在间隔一段时间执行一次回调的场景有：
  • 滚动加载，加载更多或滚到底部监听
  • 搜索框，搜索联想功能

具体实现

防抖

// 简易版的防抖函数实现debounce:clearTimeout以及setTimeout结合
function debounce(func, wait) {
    
    let timeout;
    return function(){
   
        let self = this;
        let args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function(){
   
            func.apply(self, args);
        }, wait);   
    }
}

// 加入立即执行版的防抖函数实现debounce:增加一个immediate参数
function debounce(func, wait, immediate) {
    
    let timeout;
    return function(){
   
        let self = this;
        let args = arguments;
        if(timeout) clearTimeout(timeout);
        if(immediate){
   
            let callNow = !timeout;
            timeout = setTimeout(function(){
   
                timeout = null;
            }, wait)
            if(callNow){
   
                func.apply(self, args);
            }
        } else {
   
            timeout = setTimeout(function(){
   
                func.apply(self, args);
            }, wait);
        }
    }
}

节流

// 简易版节流：使用时间戳与定时器的写法，事件立即执行但停止触发后不执行
function throttled (func, wait) {
    
    let oldTime = new Date();
    return function(...args){
   
        let nowData = new Date();
        if(nowData - oldTime >= wait){
   
            func.apply(null, args);
            oldTime = new Date();
        }
    }
 }

// 简易版节流：使用定时器写法，delay毫秒后第一次执行，第二次事件停止触发后依然会再一次执行
function throttled (func